CSS Formatter
Beautify or minify CSS stylesheets.
โAbout the CSS Formatter
Beautify or minify CSS with a single toggle. Beautify expands rules onto separate lines with two-space nesting per selector block, while minify strips comments and whitespace and removes the final semicolon before each closing brace. Comments are preserved when beautifying and dropped when minifying.
How to use the CSS Formatter
- Paste your stylesheet into the editor.
- Leave Minify unticked for readable output, or tick it for production-ready compression.
- Copy the result from the output box.
- Toggle the checkbox to compare both versions of the same stylesheet.
CSS Formatter FAQ
What does minification remove?
All comments, line breaks and unnecessary whitespace around braces, colons, commas and semicolons, plus the trailing semicolon before every closing brace โ without changing any declarations.
Are comments kept when beautifying?
Yes, comments are stored during the rewrite and restored in place, so documentation above rules survives beautification.
Does it understand media queries and nested blocks?
Nested at-rules like @media indent correctly, with each level of braces adding one level of two-space indentation.