CSS Minifier: Shrink Stylesheets Before Deployment
Every byte removed from CSS is one less byte the browser must download, parse, and apply. CSS minification removes all content the browser ignores — comments, extra whitespace, and redundant syntax — producing a functionally identical stylesheet at a fraction of the original size.
The result is functionally equivalent CSS. Browsers parse minified and unminified CSS identically.
What Minification Removes
Block comments (/* ... */) are stripped entirely. Whitespace — spaces, tabs, newlines — between tokens is removed or collapsed to a single space where necessary (e.g. between a selector and its rule). Spaces around {, }, :, ;, and , are removed. The final semicolon before a } is redundant in CSS and is removed.
gzip Compound Effect
CSS minification and HTTP gzip compression compound each other. Minified CSS contains fewer unique token sequences, which gzip compresses more aggressively. A typical stylesheet minified to 70% of its original size will compress to roughly 12–18% of its original with gzip — a 5–6x reduction over the wire.
When to Use a Build Tool Instead
This tool handles one-off snippets. For production deployments, integrate minification into your build pipeline via Vite's CSS handling, PostCSS with cssnano, or your CDN's auto-minification. Build tools also handle source maps, which let browsers show original unminified lines in DevTools despite serving the minified file.
Practical Examples
Reducing an Inline Style Block
Minify CSS copied from a Figma export or design tool before embedding it in a <style> tag.
- 1.Paste the CSS (often well-commented and spaced from design tools)
- 2.The minified output appears immediately below
- 3.Note the byte reduction percentage
- 4.Copy the minified CSS and paste it into your