Make minified CSS readable again
You right-click “Inspect” on a production site, find the CSS that’s causing your layout bug, and it’s one massive line. 47 selectors, hundreds of declarations, zero line breaks. You can’t debug what you can’t read.
Paste it here. The formatter puts each property on its own line, indents nested rules properly, keeps your comments intact, and handles media queries and keyframes without breaking anything. Pick 2-space or 4-space indentation and you’re done.
Why you end up needing this
Minified CSS is great for production bandwidth. It’s terrible for figuring out why your z-index isn’t working. The formatter turns body{margin:0}h1{font-size:2rem;color:#333}.nav{display:flex;gap:1rem} into something a human can actually parse.
Other scenarios: you’re customizing a third-party theme that ships minified, you inherited a project where three different devs used three different formatting styles, or you’re learning CSS from a site and want to see how their styles are structured.
One property per line matters
It’s not just aesthetics. When every declaration is on its own line, git diff shows you exactly which property changed. Code reviews get faster because reviewers aren’t squinting at long lines trying to spot what’s different. And you can scan a rule block vertically instead of reading it like a paragraph.
The formatter handles @media, @keyframes, and other at-rules with proper nesting. Comments are preserved where they are.
For the reverse, compressing CSS for production, use the CSS Minifier. The HTML Formatter handles markup if you need that too.
FAQ
SCSS or LESS?
This handles standard CSS only. Media queries and at-rule nesting work fine, but SCSS variables, mixins, and nesting syntax aren’t supported. Use a dedicated preprocessor formatter for those.
Does it modify my styles?
No, only whitespace changes. Selectors, properties, values, and their order stay exactly the same.
2 spaces or 4?
Most front-end teams use 2 spaces for CSS. Go with whatever your project’s .editorconfig says. If there’s no standard yet, 2 spaces keeps deeply nested media queries from scrolling off screen.
Private code?
Client-side only. Your CSS stays in your browser.