Minified CSS is fine for browsers and hopeless for people. This tool lays it out with one declaration per line and consistent indentation, including inside media queries. Strings containing semicolons or braces are protected, comments stay where they were, and the result means exactly the same thing to a browser as what you pasted.
How to use it
- Paste your CSS.
- Choose spaces or tabs.
- Read the formatted code.
- Copy it into your project.
When it helps
- Reading a minified stylesheet from a live site.
- Cleaning up CSS before you edit it.
- Putting a team on one style.
- Working out how someone else built a layout.
Good to know
- Run it on both files before comparing two stylesheets; differences become much easier to see.
- It expands CSS only. A build tool does the reverse.
- It's built for plain CSS, so SCSS and LESS features may not lay out as expected.
What it does and doesn't do
It reads your CSS character by character, tracking strings, comments and brackets, and writes one declaration per line with consistent indentation. Selectors separated by commas go on one line, and at-rules such as media queries nest their rules.
It never reorders or removes rules, so the cascade is untouched, and the result behaves identically to the original.
Worked example: minified stylesheet
A single line such as .card{margin:0 auto;padding:1rem}.card:hover>a{color:red} expands into two rules, each with its declarations on separate lines. Media queries appear with their rules indented inside.
This is the quickest way to read a production stylesheet when you want to learn how a site is built.
Keeping CSS maintainable
Group related rules, use consistent naming, avoid very specific selectors and use variables for colours and spacing. Remove unused rules regularly. A formatter keeps layout consistent, so reviews focus on changes that matter.
For production, minify your CSS in your build process, keeping the readable source in version control.
Linting and style guides
Beautifying handles layout, while a linter such as Stylelint checks for mistakes, duplicate properties and inconsistent naming. A shared style guide, covering selector naming, ordering of properties and the use of variables, keeps a team's CSS manageable.
Run both in your build, so formatting never needs discussion in review.
Dealing with vendor prefixes and hacks
Older stylesheets contain prefixed properties such as -webkit-box-shadow and hacks for old browsers. The beautifier keeps them intact. Once you can read the code, you can decide which are still needed.
Tools like Autoprefixer add prefixes automatically based on the browsers you target, so you can remove manual ones.
A readable first pass
When you inherit a minified stylesheet, beautify it, then search for the class names you care about. Reading rules in context beats guessing from a single long line.
Questions
Does it change my styles?
No, only whitespace.
Can it handle comments?
Yes, they stay in place.