How to format CSS
- Paste minified or messy CSS, for example a stylesheet copied from a live website or a style block from an email template.
- Choose 2 spaces, 4 spaces or tabs.
- Press Format. Each selector starts on its own line, each declaration is indented on its own line, and nested at-rules such as
@mediaand@supportsare indented inside their blocks. - Copy the result or download it as a
.cssfile.
Why format CSS?
Production CSS is usually minified to save bytes, which makes it a single unreadable line. When you need to find out why a button looks wrong, how a third-party theme achieves an effect, or which rule a framework applies, a formatted version lets you scan selectors and search for properties. It is also the first step when you inherit a project whose CSS was edited by many hands with mixed indentation.
The formatter uses js-beautify's CSS engine, which preserves comments, keeps up to two blank lines that were already there, and does not reorder or change any rules, so the formatted stylesheet behaves exactly like the original. If you also need to inspect where rules come from, your browser's DevTools show the source and line for each style.
The library loads once, and formatting happens locally in your browser. Your CSS is never uploaded.
FAQ
Will formatting change how my CSS works?
No. Only whitespace and line breaks change. Selectors, values and their order stay the same.
Can it sort properties or remove duplicates?
No, it only formats. Tools such as Stylelint with a property-order plugin can sort declarations.
How do I minify the CSS again?
Use the CSS Minifier on this site, which removes comments and whitespace and shortens values.