CSS Formatter & Minifier

Key facts

How to use

1. Paste your CSS rules, media queries, or stylesheet into the input editor.
2. Select your preferred indentation size (2 or 4 spaces) or choose tabs.
3. Click 'Format CSS' to beautify the code or select 'Minify CSS' to remove spaces and comments.
4. Copy or download the formatted stylesheet for your project.

Examples

.btn{color:#fff;background:blue;}

.btn {
  color: #fff;
  background: blue;
}

/* Button */
.btn {
  color: #fff;
  background: blue;
}

.btn{color:#fff;background:blue}

Edge cases

How it works

1. Tokenizes and constructs a syntax tree from CSS source using Prettier's PostCSS parser inside a dedicated Web Worker.
2. Normalizes property formatting, spaces around colons and curly braces, and applies consistent indentation.
3. Minification strips comment blocks, collapses redundant spacing around operators and selectors, and discards trailing semicolons before block ends.
4. Outputs pure CSS directly back to the workspace without network transmission.

Related workflows

• HTML Formatter

  Format, beautify, and minify HTML markup locally in your browser.

• Code Snapshot

  Render pasted code as a styled SVG snapshot with syntax highlighting, themes, window frames, and gradient backgrounds for blogs and docs.

• Case Converter

  Convert text, identifiers, and variables between camelCase, snake_case, kebab-case, PascalCase, CONSTANT_CASE, Title Case, dot.case, and path/case.

Frequently asked questions

References

• W3C CSS Specifications — Follows official W3C CSS syntax and declaration guidelines