CSS Formatter
Format and minify CSS code with proper indentation
About the CSS Formatter
This CSS formatter beautifies minified stylesheets with consistent indentation and one declaration per line, so nesting and media queries become visible, and minifies in the other direction to cut file size for production. Both directions run in your browser with nothing uploaded.
A CSS formatter is what you reach for when a stylesheet arrives as one continuous line — a production build, a minified vendor file, or a theme you need to read before changing. Nesting and rule boundaries are invisible until it is indented.
Formatting puts each selector on its own line, indents declarations consistently and spaces the blocks apart, so media queries and nested at-rules become visible as structure rather than a run of braces.
Minification goes the other way, stripping comments, whitespace and line breaks for production. Typical savings are 20 to 30% before gzip, which compresses repetitive CSS well on top of that. Keep the formatted version in source control and minify at build time.
How to use the CSS Formatter
- Paste your CSS. Enter the minified or messy stylesheet.
- Choose a direction. Beautify for reading, or minify for production.
- Review the output. Check the indentation, or the size saved.
- Copy the result. Take the formatted or minified CSS.
CSS Formatter features
- Beautify minified CSS with consistent indentation
- One declaration per line for readability
- Minify by stripping comments and whitespace
- Media queries and at-rules formatted as structure
- Before and after size comparison
- Runs entirely in your browser
Frequently asked questions
Does formatting change how my CSS behaves?
No. Only whitespace and line breaks change. Selectors, declarations and their order are untouched.
How much does minifying save?
Typically 20 to 30% before gzip. Gzip then compresses repetitive CSS further on top of that.
Are comments removed when minifying?
Yes. Comments are stripped for production. Keep the formatted version in source control.
Are media queries handled?
Yes. Media queries and other at-rules are indented as nested structure so they read clearly.
Is my CSS uploaded?
No. Formatting and minifying both happen in your browser.