About the CSS Minifier & Beautifier
This CSS minifier and beautifier works both ways. Minify mode strips comments, line breaks and unnecessary spaces, drops the last semicolon in each block and removes empty rules; with safe optimisations on, it also shortens six-digit hex colours (#ffffff → #fff) and removes leading zeros (0.5em → .5em). Beautify mode takes compressed or messy CSS and lays it out with one declaration per line, consistent indentation and one selector per line.
Use it to shrink a stylesheet before deploying, to inline critical CSS, to paste compact styles into an email template or CMS field, or to make sense of a minified file from a library or a production site. The size panel shows the original and resulting size in bytes and the percentage saved.
The minifier is deliberately conservative: strings, url() values and the spaces inside calc() and nth-child() are never touched, and /*! … */ licence comments are kept. It does not merge rules or restructure selectors, so the output always behaves exactly like the input. Everything runs in your browser; nothing is uploaded.
How to use the css minifier & beautifier
- 1Paste your CSS into the box.
- 2Choose Minify to compress it or Beautify to make it readable.
- 3For minify, leave safe optimisations on unless you need exact colour spelling.
- 4Decide whether to keep comments (/*! licence comments are always kept when minifying).
- 5Copy the result and check the size saving.
Formula and method
Minification first sets aside every string, url() and comment so they cannot be altered, then collapses runs of whitespace to a single space and removes spaces next to braces, semicolons, commas and colons, and around the >, + and ~ combinators outside parentheses (so calc(100% - 20px) keeps the spaces it needs). The final semicolon in each block and empty rules are dropped. Optional optimisations shorten #aabbcc colours to #abc and remove the leading zero from decimals, but only inside declarations, never in selectors.
Beautifying minifies first and then rebuilds the stylesheet as a tree of rules, at-rules and declarations, printing each with consistent indentation. Sizes are counted in UTF-8 bytes, which is what is actually sent over the network before compression.
- original bytes
- UTF-8 size of the CSS you pasted
- new bytes
- UTF-8 size of the minified or beautified result
Worked examples
Minify a small stylesheet
The comment, line breaks and indentation go, #ffffff and #336699 shorten to #fff and #369, 0.5em and 0.85 lose their leading zeros, and final semicolons are dropped. The spaces inside calc() and the quoted font name are preserved. 327 bytes become 242, a 26.0% saving.
Beautify minified CSS
Each rule gets its own block with one declaration per line and two-space indentation. The selector list a:hover,a:focus is split onto separate lines, and a blank line separates the two rules.
Minify without optimisations
With optimisations off, colours and numbers are left exactly as written. Whitespace around the > combinator is removed, but the spaces around + inside calc() are required by CSS and are kept.
Frequently asked questions
What does minifying CSS do?+
It removes everything the browser does not need — comments, line breaks, indentation and redundant spaces and semicolons — so the file is smaller and downloads faster. The minified CSS behaves exactly the same as the original.
How much smaller does minified CSS get?+
It depends on how much of the file is whitespace and comments: heavily commented, generously indented CSS shrinks far more than CSS that is already compact. The size panel shows the exact saving for your file. After minifying, enable gzip or Brotli on your server, which compresses the remaining text much further.
Can minifying CSS break my site?+
A careful minifier should not. Problems usually come from tools that remove spaces inside calc() (which requires spaces around + and −) or between selectors. This tool never alters strings or url() values, and it keeps the spaces around + and − inside calc(), nth-child() and other parentheses.
How do I unminify CSS?+
Choose Beautify and paste the minified code. It rebuilds the structure with one declaration per line, indented blocks and one selector per line. Comments that were stripped during minification cannot be recovered.
Should I keep the minified and original CSS?+
Yes. Edit the readable source and generate the minified file as part of your build or before uploading. Many build tools (Vite, webpack, Next.js) minify CSS automatically for production builds.