CSS Beautify & Minify
Format or minify CSS stylesheets.
About the CSS Beautify & Minify
Compresses a stylesheet, or expands one back out. Minifying runs CSSO, which does more than strip whitespace: it drops comments, shortens values where a shorter form is equivalent, and merges selectors that declare exactly the same properties. Beautifying re-indents a minified file so you can read what a build actually shipped. Both directions work from the same input panel.
How to use the CSS Beautify & Minify
- Paste your CSS into the input panel, or press Sample to load an example.
- Press Minify to compress it, or Beautify to indent it for reading.
- Set Indent to 2 spaces or 4 spaces before beautifying.
- Copy the result, or Download it as styles.css.
Frequently asked questions
- What does minifying change besides whitespace?
- It removes comments, shortens values where the shorter form means the same thing — 0px becomes 0, #ff0000 becomes red — and merges rules with identical declarations into a single selector list.
- Is the minified output still ordinary CSS?
- Yes, you can serve it directly. CSSO's transformations are designed to preserve rendering, but as with any minifier, compare a rendered page against the original before shipping a large stylesheet.
- Can I get a minified file back to its original source?
- Not exactly. Beautify restores indentation and line breaks, but comments and the original rule order are gone once minified. You get readable CSS, not your source file.
- Should I do this if my build already minifies?
- Probably not for production assets — a bundler or a CDN minification step already covers those. This is for a stylesheet you are pasting somewhere by hand, or for checking how much a given file actually shrinks.