CSS Formatter & Beautifier
Beautify minified or messy CSS into readable code, or minify a stylesheet for production. Nesting, @media rules and comments are handled, and everything runs in your browser. For JSON, use the JSON formatter.
How to use CSS Formatter
- Paste CSS into the Input panel, or open a .css file.
- Choose Format or Minify as the mode.
- For formatting, pick an indent of 2 spaces, 4 spaces or tabs.
- Copy the output or Download it as styles.css or styles.min.css.
Frequently asked questions
How do I beautify minified CSS?
Paste the minified CSS and choose Format. Each rule and declaration is put on its own line with consistent indentation.
Does formatting change how my CSS works?
No. Formatting only changes whitespace and line breaks. Minifying also removes ordinary comments. The rules and their order stay the same.
Does minifying CSS remove licence comments?
Ordinary comments are removed, but comments that start with /*! are kept, which is the usual convention for licence notices.
Does it support CSS nesting and media queries?
Yes. Nested rules, @media and other at-rules are formatted and minified correctly.
What if my CSS has a missing brace?
The tool warns you to check your braces so you can find the unbalanced rule before using the output.
Is a formatter the same as a linter?
No. A formatter only tidies the layout. A linter such as stylelint finds mistakes like unknown properties. In a project, a formatter such as Prettier can run on save; this page is for one-off files.
Example
Minified input: .card{padding:8px;color:#333}@media (max-width:600px){.card{padding:4px}}
Formatted with 2 spaces, each rule and declaration gets its own line, and the rule inside @media is indented one level. Minifying the formatted version gives back the one-line input. To see exactly what changed between two versions of a stylesheet, paste both into the diff checker.