CSS Minifier & Beautifier
Minify CSS to reduce file size, or beautify minified CSS back into readable, indented code.
How to Use
- Paste your CSS into the input box.
- Click "Minify" to compress it for production use.
- Click "Beautify" to expand minified CSS into readable format.
- Copy or download the result.
When to Use This
- Trimming a small stylesheet for a site with no build step, where adding a bundler for a single file is not worth the setup.
- Expanding a minified theme file you need to read before overriding one rule, so that selectors land one per line.
- Measuring roughly how much of a legacy stylesheet is comments and indentation, using the character counts reported before and after.
- Preparing a short block of CSS to inline into a style attribute or an email template, where newlines are inconvenient.
Frequently Asked Questions
About This Tool
Not all whitespace in CSS is decoration. The space in .card .title is a descendant combinator and removing it changes which elements match, while the space after a colon in a declaration means nothing at all. A minifier has to tell the two apart. Comments are safe to drop, the final semicolon before a closing brace is redundant, and the newlines between rules exist only for the person reading the file.
This tool is a series of regular expression passes rather than a CSS parser. Minifying strips comments, collapses runs of whitespace, removes the spaces sitting directly against braces, colons, semicolons and commas, drops the semicolon before a closing brace, and puts each closing brace on its own line, then reports the character count before and after. Beautifying walks the text character by character and re-indents two spaces per nesting level.
Notes & Limits
- Whitespace is collapsed everywhere, including inside quoted strings, so a content: " " value or a font name with doubled spaces will change.
- Because this matches patterns rather than parsing, a brace or semicolon inside a url() or a data URI can be mistaken for structure and break the output.
- Nothing is rewritten beyond whitespace: colors are not shortened, duplicate rules are not merged and unused selectors are not removed. cssnano does those.
- Comments are removed unconditionally, including the license banner comments that build pipelines are normally configured to keep in the output.