About the CSS Formatter
Minified CSS is great for performance but nearly impossible to read or edit. The CSS Formatter expands stylesheets back into a readable layout with each selector on its own line, one declaration per line, consistent indentation and blank lines between rules.
It handles media queries, keyframes, nested at-rules and comments. Use it to inspect the CSS of a website, clean up code generated by tools, or standardize formatting before committing to version control. Formatting is performed in your browser using the js-beautify library.
How to use the CSS Formatter
- Paste your CSS into the input box.
- Choose the indentation style.
- Click Format CSS.
- Copy the formatted stylesheet.
Frequently asked questions
Does formatting change how CSS works?
No. Only whitespace and line breaks are changed, so the styles behave exactly the same.
Can I minify CSS again afterwards?
Yes. Use our CSS Minifier to compress the stylesheet for production.
Does it support SCSS or LESS?
Basic SCSS and LESS syntax usually formats well, but some advanced preprocessor features may not be indented perfectly.