CSS Formatter
Expand a minified stylesheet into readable rules, or compress one back down. Nested at-rules, comments and quoted content are all preserved.
How to use the CSS Formatter
- Paste your CSS, minified or not.
- Press Format for one declaration per line, or Minify to strip everything optional.
- Copy the result or download it as a
.cssfile.
How the parser avoids common traps
Formatting CSS by splitting on braces and semicolons works until it meets real stylesheets. This tool scans character by character and tracks context, so three awkward cases behave correctly:
- Semicolons inside strings.
content: "a;b"is one declaration, not two. - Braces inside comments. A commented-out rule does not change the indent level.
- Nested at-rules.
@media,@supportsand@layercontain full rules, so their contents are indented one level deeper.
What minifying removes — and what it does not
Minifying here strips comments, collapses whitespace, removes the final semicolon in each block and shortens leading zeros (0.5em becomes .5em). These are safe, purely syntactic changes.
It deliberately stops short of the risky optimisations that a build tool performs: it will not merge duplicate selectors, reorder declarations, shorten hex colours or drop rules it believes are unused. Those transformations require understanding the cascade, and getting them wrong changes how a page looks. For production builds, run a dedicated minifier in your pipeline; this tool is for quick, predictable cleanups.
Frequently asked questions
Does it work on SCSS or Less?
Partly. Plain nesting and standard syntax usually survive, but variables, mixins and control directives are treated as ordinary text. Compile to CSS first for reliable results.
Will formatting change how my page renders?
No. Only whitespace, comments and optional semicolons change. Selector specificity, declaration order and the cascade are untouched.
Why are my comments gone?
Switch on "Keep comments" before formatting. Minifying always removes them, including licence headers — copy those back manually if your project requires them.
Can it detect unused CSS?
No. That needs the HTML and JavaScript that use the stylesheet. Browser dev tools have a coverage panel that reports it for a live page.
Related tools
Indent and tidy HTML markup, or minify it back down.
Re-indent JavaScript so nesting and blocks are readable.
Format, indent and validate JSON with precise error locations.
Convert colours between HEX, RGB, HSL and HSV with a live preview.
Sort lines alphabetically, numerically, by length or at random.