How to use CSS Minifier & Beautifier
The CSS Minifier removes whitespace, comments, redundant semicolons and other unnecessary characters from CSS stylesheets to reduce file size and improve page load performance. Minified CSS can be 20–40% smaller than the original, directly reducing the bandwidth required to deliver stylesheets and shortening the render-blocking time that delays First Contentful Paint.
- Paste your CSS code into the input area or upload a .css file.
- Choose minification options: remove comments, collapse whitespace, remove redundant semicolons, merge duplicate selectors.
- Click Minify to produce the compressed output.
- Review the size-reduction statistics (original size, minified size, savings percentage).
- Copy the minified CSS or download it as a .min.css file.
- To reverse the process, use the Beautify / Format option to re-indent minified CSS for debugging.
Your data never leaves your device — 100% private processing.
What CSS minification removes
CSS minification performs several transformations: it strips all comments (/* ... */), collapses multiple spaces and newlines to a single space or nothing, removes the final semicolon before a closing brace, shortens colour values (#ffffff → #fff, rgb(255,255,255) → #fff), removes leading zeros from decimal values (0.5em → .5em), and removes units from zero values (0px → 0). Advanced minifiers also merge adjacent rules with identical selectors and remove duplicate properties, though these transforms carry a small risk of changing cascade behaviour.
Minification vs compression (gzip/Brotli)
Minification and HTTP compression are complementary, not alternatives. Minification removes semantic redundancy, making the file smaller before compression. Gzip and Brotli then apply general-purpose dictionary compression, which works best on repetitive text. A minified CSS file typically compresses better than an un-minified one because repeated tokens (property names, values) are more densely packed. For production, always apply both: minify at build time and serve with Brotli (preferred) or gzip via your CDN or web server.
| Stage | Typical size | Reduction from original |
|---|---|---|
| Original (authored) | 100 KB | — |
| After minification | 70–80 KB | 20–30% smaller |
| After minification + gzip | 15–20 KB | 80–85% smaller |
| After minification + Brotli | 12–16 KB | 84–88% smaller |
Worked examples
Minify a rule
Inputs: body { color: #ffffff; margin: 0px; }
Result: body{color:#fff;margin:0}
Strip comments
Inputs: /* nav */ .a { color: red; }
Result: .a{color:red}
Typical size saving
Inputs: 10 KB of readable CSS
Result: often 20–40% smaller before gzip
Glossary
- Minification
- Removing all non-essential characters from source code without changing its functionality.
- Dead code elimination
- Removing CSS rules that are never applied to any element in the document.
- Brotli
- A modern compression algorithm developed by Google that typically outperforms gzip by 15–25%.
- Critical CSS
- The minimal CSS required to render above-the-fold content; inlined in <head> to eliminate render-blocking requests.
- Source map
- A file that maps minified code back to original source lines, enabling debugging of minified production assets.
Related reading
Frequently Asked Questions
Why use CSS Minifier & Beautifier?
- Strip comments, whitespace, and redundant semicolons to shrink CSS size by 20–40%
- Shorten colour values and remove zero units to squeeze additional bytes from stylesheets
- Reverse-minify a compressed stylesheet back to readable form for debugging
- See precise before-and-after file-size statistics to quantify the byte reduction
Common use cases
- Minify a vendor stylesheet to reduce render-blocking CSS before a Lighthouse audit
- Compress a custom animation CSS file before inlining it in a Next.js page head
- Beautify a minified third-party stylesheet to understand its selectors during debugging
- Measure size savings before and after minification to justify adding a build step
- Produce a .min.css file from a utility library to serve from a CDN
Get weekly tool tips & updates
New tools, power-user tips, and productivity hacks — delivered free every Friday.
No spam, ever. Unsubscribe with one click.
Related Developer Tools
JSON Formatter & Validator
Format, validate, and minify JSON instantly. Includes syntax highlighting, error detection, and a collapsible tree view — free, private, in-browser.
HTML Encoder / Decoder
Encode and decode HTML entities online. Escape <, >, &, and quote characters for safe HTML display. Free, instant, and private — runs in your browser.
URL Encoder / Decoder
Encode and decode URLs and URL components online. Convert special characters to percent-encoding and back instantly — free, private, and fast.
JavaScript Minifier
Minify and compress JavaScript online with Terser. Remove whitespace, comments, and dead code, and optionally mangle names to shrink your JS. Free and private.
Code Beautifier & Formatter
Format and beautify code online with Prettier. Supports JavaScript, TypeScript, JSON, CSS, HTML, Markdown, YAML, and more. Free, private, runs in your browser.
Regex Tester
Test and debug regular expressions online. See live matches, capture groups, and replace output. Free, private, instant.
Explore all Developer Tools.