CSS Beautifier

Making minified CSS readable again

Minified CSS is efficient to download but almost impossible to read, since everything sits on one long line. When you need to debug a style on a live site, learn from how another project is built, or recover a stylesheet whose original source has been lost, beautifying it is the first step. This tool adds line breaks and indentation so each rule, selector and property is easy to see.

Nested blocks such as @media queries, @supports rules and @keyframes animations are indented properly, so you can tell which rules apply at which screen sizes. That structure makes it much easier to find why a style changes on mobile or why an animation behaves unexpectedly. You can choose the indentation width to match your editor or team style.

Beautifying only changes layout, not meaning. It will not fix invalid CSS, but readable code makes errors much easier to spot, such as a missing semicolon or closing brace that causes the rules after it to be ignored. Once the CSS is readable, look for repeated declarations, overly specific selectors and rules that are never used, which are common in stylesheets that have grown over time. If you are studying another site's styles, use them to learn techniques rather than copying the code wholesale. When you are finished editing, run the CSS through the minifier again before publishing. The tool works entirely in your browser, so your stylesheets are never sent to a server. Keeping a readable copy alongside the minified one in your project saves you from repeating this work later, and helps anyone else who maintains the site.