kernos/

CSS Formatter

input.css
Loading editor…
Ln 1, Col 11 lines0 chars
terminal
$css-formatter
Buy me a coffee

About CSS Formatter

CSS Formatter takes minified or inconsistently indented CSS and rewrites it with clean 2-space indentation — one declaration per line, normalized `property: value` spacing, nested at-rules (like `@media`) indented correctly. It also catches structural breaks like unbalanced braces or unterminated strings, and can minify a stylesheet back down for production. Everything runs in your browser — nothing you paste is uploaded, logged, or stored anywhere.

How to use it

  1. 1

    Paste your CSS

    Paste a stylesheet into the input pane on the left, or drag a .css file directly onto it.

  2. 2

    Choose an action

    Click Format to pretty-print with 2-space indentation, Minify to compress it, or Validate to check for structural errors without changing anything.

  3. 3

    Copy the result

    Click Copy to copy the output pane to your clipboard, or Clear to start over.

What it does

FAQ

Does this validate CSS property names and values?

No. It checks structure — matching braces, closed strings and comments — not whether a property or value is spec-valid CSS. Browsers are lenient about unknown properties (they just ignore them), so catching that class of error requires a full CSS spec parser, which is more than a formatter needs to be useful.

Will formatting change how my stylesheet looks when applied?

No. Formatting only changes whitespace and indentation — selectors, property names, and values are preserved exactly, so the rendered output is unaffected.

Does Minify handle nested @media rules correctly?

Yes. Minify walks the same brace structure as Format, so nested at-rules are collapsed correctly rather than treated as flat text.

Does this tool send my CSS anywhere?

No. Formatting, minifying, and validating all happen locally in your browser. Your CSS is never sent over the network.

Related tools