Skip to content
ToolzKit

Developer

CSS Formatter

Expand or minify CSS with one declaration per line and proper at-rule nesting.

Input

Paste CSS

Output

Formatted CSS appears here.

Paste CSS above, or load the example.

About the CSS Formatter

This tool expands CSS into a readable, indented format with one declaration per line, correctly handling nested at-rules like @media and @supports, and can also collapse everything into a single minified line. It's built for anyone cleaning up generated, minified or copy-pasted stylesheets.

How to use it

  1. 01Paste your CSS into the input panel.
  2. 02Choose an indent width, or enable minify to collapse it entirely.
  3. 03Review the reformatted CSS on the right.
  4. 04Copy or download the result as a .css file.

Features

  • One declaration per line with consistent indentation
  • Correct nested indentation for @media, @supports and similar at-rules
  • Optional minify mode that strips comments and whitespace
  • Comment stripping in both modes to keep output clean

Practical examples

Un-minifying a vendor stylesheet

Paste a minified third-party CSS file to expand it and inspect how a specific selector or media query is defined.

Limitations

  • Comments are removed rather than preserved in their original position.
  • This is a bracket-based formatter, not a full CSS parser, so it does not validate property names or values.

Privacy

All formatting happens locally in your browser; your stylesheet is never uploaded to a server.

Read the full privacy policy for how the site as a whole handles data.

Frequently asked questions

Does it validate CSS syntax?

No, it only reformats structure based on braces and semicolons; it does not check property or selector validity.

Are comments kept?

No, comments are stripped out during formatting in both expanded and minified modes.

Does it support nested @media blocks?

Yes, nested at-rules are indented one level deeper for each level of brace nesting.