CSS beautifier - format CSS in your browser
CSS in a minified state is a production classic - `app.min.css` a mile wide. The beautifier uses Prettier with the postcss parser (the same one PostCSS, Autoprefixer, Tailwind stand on). Same as `prettier --write style.css`.
Gentle mode: each rule in a block on its own line, semicolons at the end, 2-space indent. Aggressive (js-beautify) does the same + forces spaces around all operators. Cosmetic-only fixes only the indent without touching rule structure.
Accepts `.css`. For SCSS and LESS there are separate landings with the same defaults but parsers that support nesting and variables.
How to use it
- Pick a mode (Gentle / Aggressive / Cosmetic-only) or keep the default.
- Paste your code into the left panel, or use "Upload file".
- Tune settings (gear icon): indent, width, quotes, semicolons.
- Click Format - first click takes a moment (libraries lazy-load).
- On the right you get the output with syntax highlighting - copy, download, or open in new tab.
When this is useful
Five CSS situations:
- Pretty-print from DevTools. You copied computed styles from the styles inspector and it is ugly.
- Minified bundle. `tailwind.min.css` is 1.5 MB and one line - beautify a fragment for debugging.
- Generated CSS. `emotion`, `styled-components` in CSS-in-JS return unformatted output.
- CSS Modules. If you use `*.module.css`, formatting these files keeps them consistent with the rest.
- Legacy CSS. You inherited a project from 2015 - mixed styles, beautify all files.
Questions and answers
Preserves structure: `@media (min-width: 768px) { ... }` is formatted with indented inner rules. The block inside is formatted the same way as top-level.