What is a CSS formatter?
A CSS formatter (beautifier) takes minified or messily-indented CSS and rewrites it with consistent indentation, one property per line, and clear whitespace around selectors and braces. The minifier does the reverse: it strips all comments and unnecessary whitespace to produce the smallest valid stylesheet. Minified CSS reduces page load time by decreasing the amount of bytes the browser must download, while prettified CSS makes the stylesheet easier to read and debug.
How to use this tool
- 1 Paste your CSS into the Input panel.
- 2 Choose Prettify to add readable indentation, or Minify to strip all whitespace.
- 3 Adjust the indent width (default 2 spaces) to match your project style.
- 4 Copy the output or clear the input to start fresh.
Frequently asked questions
Does the formatter support @media and nested rules?
Yes. The formatter tracks brace depth so @media, @keyframes, @supports, and other at-rules are correctly indented regardless of nesting depth.
Will my CSS comments be preserved after minification?
No. The minifier strips all /* … */ comments. If you need to preserve licence comments (the /*! */ convention used by some tools), format with Prettify instead.
Does this tool validate my CSS?
It formats what you give it — it doesn't validate. CSS syntax errors that cause parsing ambiguity may produce unexpected output, but the tool doesn't try to fix or report them.
Is my CSS uploaded to a server?
No. All formatting and minification run locally using a hand-rolled tokeniser. Nothing leaves your browser.
Why might the minified output still be larger than tools like cssnano produce?
cssnano performs optimisations beyond whitespace removal: it merges duplicate selectors, shortens property values, and removes redundant overrides. This tool only strips whitespace and comments — it's a safe, lossless operation.