CSS Beautifier: Make Minified Stylesheets Readable Again
Minified CSS is fast to serve but impossible to read. Paste any minified or unformatted CSS and this tool re-formats it with proper indentation, one declaration per line, and clean selector spacing — ready for editing or debugging.
Comments are stripped before formatting to produce clean output. Selector lists separated by commas are placed on their own lines.
Brace-Depth Indentation
The formatter scans the CSS character by character, tracking the current brace depth. Each { increments depth and places the following declarations on a new indented line. Each } decrements depth and is placed on its own line at the parent indent level. This handles any nesting depth — @media, @keyframes, @supports — without special cases.
When to Beautify vs When to Keep Minified
Beautify CSS when debugging styles in a project, reviewing a third-party stylesheet, or when copying styles from a production site's DevTools. Keep CSS minified (or let your build tool handle it) in production, where every extra byte affects load time. Beautifying is a development-time operation.
Difference from Prettier
Prettier formats CSS with extensive rules including property sorting, shorthand expansion, and consistent quote styles. This tool does only structural formatting — indentation and line breaks based on brace depth. The result is readable but not fully Prettier-compliant. For committed code, configure Prettier in your editor and let it run on save.
Practical Examples
Reading a Production Stylesheet from DevTools
Browser DevTools often show the minified version of a stylesheet. Copy it here to read it.
- 1.Open DevTools → Sources or Styles tab
- 2.Copy the minified CSS rule or full stylesheet
- 3.Paste here and select your preferred indent size
- 4.Read the formatted output to understand the styles
Formatting Rules Applied
- Each selector on its own line, { on same line as selector
- Each declaration (property: value) on its own indented line
- Closing } on its own line at parent indent level
- Blank line between top-level rule blocks
Good Use Cases
- Making minified third-party CSS readable for debugging
- Reviewing styles copied from browser DevTools
- Formatting auto-generated CSS from design tools
- Cleaning up manually written CSS with inconsistent spacing
Frequently Asked Questions
What does the CSS beautifier do?
It re-formats CSS by placing each selector on its own line, opening braces on the same line as the selector, each declaration on its own indented line, and closing braces on their own line. Comments are stripped to produce a clean output.
Can I choose the indentation size?
Yes. Toggle between 2-space and 4-space indentation using the buttons above the input. 2 spaces is more compact and is the convention in many modern projects. 4 spaces is the traditional CSS standard.
Does the formatter handle media queries and nested rules?
Yes. Media queries (@media) and other at-rules that contain nested rule blocks are indented correctly. The formatter tracks brace depth, so any level of nesting is handled.
Will it format CSS with variables (custom properties)?
Yes. CSS custom properties (--variable-name: value) are treated like any other declaration and are formatted with the same indentation as other properties.