Why CSS is minified
Websites serve CSS with all the spaces, line breaks and comments removed, because a smaller file loads faster. The result is a single very long line that is nearly impossible to read. A beautifier does the opposite: it puts the whitespace back, so a person can follow the code.
How to unminify CSS
- Copy the minified CSS. In your browser developer tools, open the Sources or Network tab and copy the stylesheet, or open the .css file address directly.
- Paste it in the box. The tool shows a note when the input looks minified.
- Read the result, or copy it into your editor.
What you get back and what you do not
The structure comes back in full: every rule, selector, declaration and media query is laid out again. What was removed during minifying cannot return. Comments are gone, the original order of blank lines is gone, and any colors written as #ffffff may have become #fff. Names of custom properties are kept. If the file came from a build tool, the original SCSS or source files are the better thing to edit.
Typical uses
- Reading a theme or plugin stylesheet, to find the rule that styles an element.
- Debugging a layout problem in production CSS.
- Reviewing a third party library before you add it to a project.
- Recovering a readable file when only the minified version is left.
Options
You can change the indent, move the braces to their own lines, split selector lists, sort the properties and break long comma separated values. The same options are on the CSS formatter.
To compress the code again, use the CSS minifier or the CSS compressor. To read the result with line numbers and colors, open the CSS pretty print view. For other languages, use the JavaScript beautifier or the HTML beautifier. The CSS formatting guide explains the style choices.