Free Online CSS Formatter
Format and minify CSS stylesheets with clean indentation.
Beautifying uses js-beautify's CSS module. Minifying removes comments and whitespace while preserving
strings, custom property values, and the spaces required inside calc() expressions.
About the CSS Formatter
Stylesheets grow in layers. A base reset, a utility file, component rules, media queries, and vendor overrides are often combined into one asset by a build step, leaving a single line of compressed declarations that is almost impossible to review. This formatter restores order by placing each selector and declaration on its own line, aligning nested blocks, and optionally separating rules with a blank line. It can also compress a stylesheet when you need a smaller payload for an email template, an embedded widget, or a quick benchmark.
What the formatter understands
- Selectors: class, id, attribute, pseudo-class, and descendant combinators keep their meaning while gaining readable spacing.
- Declarations: property names, values,
!importantflags, and custom properties are preserved. - At-rules:
@media,@supports,@font-face, and@keyframesblocks are nested correctly. - Strings and URLs: quoted content and
url()references are never rewritten.
Beautified output is easier to diff, search, and annotate. When a rule does not apply, consistent indentation lets you spot a missing brace or a selector that accidentally targets a child element. The optional blank line between rules creates visual breathing room in long files, while the one-selector-per-line setting prevents a grouped rule from hiding one of its targets at the end of a comma list.
Minification is conservative by design. It removes comments, collapses redundant whitespace, drops the final
semicolon before a closing brace, and trims space around braces, commas, and semicolons. It does not remove
unused rules, merge duplicate selectors, or rewrite shorthand properties, because those operations require a
full stylesheet analysis and can change the cascade. Spaces inside calc(), around plus and minus
signs, and next to media query operators are kept on purpose, since removing them would break valid CSS.
The tool works entirely in your browser. The js-beautify CSS library is fetched once from a public CDN, and a lightweight internal printer takes over if that request fails. No stylesheet is uploaded, which matters when a file contains internal class names, unpublished design tokens, or comments about an upcoming release. Because formatting only changes whitespace and comments, the rendered page should look identical; still compare a minified build against the original in a staging environment before replacing production assets.
How to use this tool
- Paste a stylesheet, a CSS snippet, or a compressed bundle into the input box.
- Choose an indent size and decide how selectors and rules should be separated.
- Click Beautify CSS or Minify. The output also updates automatically after you stop typing.
- Copy the result or download it with a .css extension.
Frequently asked questions
Will minifying break calc() or custom properties?
No. The minifier deliberately keeps spaces around plus and minus signs inside calc(), and it treats custom property values as opaque text. It also preserves quoted strings, URLs, and data URIs.
Does the formatter sort or deduplicate my rules?
No. Sorting and deduplication can change which declaration wins in the cascade, so this tool never reorders rules. It only adjusts indentation, line breaks, and optional whitespace.
Why is my minified file only slightly smaller?
If the input was already compact, most of the savings have already been captured. Comments and indentation are usually the largest removable parts. Gzip or Brotli compression on the server typically produces a bigger final reduction than whitespace alone.