Simple styles
Media queries
CSS variables
Keyframes
Minified → Beautify
CSS Minifier compresses CSS code by removing whitespace, comments, and unnecessary characters without changing the visual output. Paste your CSS to get a minified version with the original size, minified size, and percentage reduction shown. Also supports pretty-printing (beautifying) minified CSS back to readable format, and can batch-process multiple CSS files.
CSS minification works by: removing comments (/* ... */), removing unnecessary whitespace (spaces, newlines, tabs between selectors and declarations), shortening color values (#ffffff to #fff, rgb(0,0,0) to #000), removing redundant semicolons (the last property in a block doesn't need one), shortening zero values (0px to 0), and combining duplicate selectors. Modern tools (cssnano, lightningcss) also perform more aggressive optimizations like merging identical selectors and removing unused rules.
For production builds, CSS minification should be part of your build pipeline (webpack, Vite, Parcel) rather than manual. Popular minifiers: cssnano (used by PostCSS), lightningcss (Rust-based, very fast, used by Vite 4+), CleanCSS, CSSO. Typical minification reduces CSS file size by 20-40%. Combined with gzip or brotli compression, total savings are often 70-85% vs uncompressed source.
Comment removal
Result: /* Header styles */ .header { color: red; } -> .header{color:red}
Shorthand optimization
Result: margin: 0px 0px 0px 0px -> margin:0
Size reduction
Result: Original: 45.2 KB -> Minified: 38.7 KB -> Gzipped: 9.1 KB (80% reduction)
What is the difference between minification and compression?
Minification: removes human-readable formatting (whitespace, comments, long names) from source code -- output is still valid code but smaller. Applied at build time, the file stays minified on disk. Compression: uses an algorithm (gzip, brotli) to encode the file content for smaller network transfer -- the server compresses, the browser decompresses automatically. Both work independently and together: a minified file gzips better than unminified (less redundancy). For CSS, apply both: minify first, then serve with gzip/brotli Content-Encoding from your server or CDN.
How do I minify CSS automatically in a build pipeline?
Vite: CSS is minified automatically in production builds (vite build) using lightningcss or esbuild. webpack: use css-minimizer-webpack-plugin (uses cssnano by default). PostCSS: add cssnano: @tailwindcss/postcss includes optimization. Next.js: production builds (next build) minify CSS automatically. Parcel: minification is built in for production builds. Create React App: CRA uses the built-in webpack pipeline. For manual use: npm install -g csso-cli then csso styles.css -o styles.min.css. lightningcss CLI: lightningcss --minify styles.css -o styles.min.css.
How do I enable gzip or brotli compression for CSS files?
Nginx: in server or http block: gzip on; gzip_types text/css; bzip_vary on;. For brotli (requires ngx_brotli module): brotli on; brotli_types text/css;. Apache: LoadModule deflate_module mod_deflate.so; AddOutputFilterByType DEFLATE text/css. Cloudflare: compression is automatic (brotli and gzip). Vercel/Netlify/GitHub Pages: compression is automatic. Node.js Express: npm install compression; app.use(compression()). Check if compression is working: curl -H 'Accept-Encoding: gzip' -I https://yoursite.com/style.css -- look for Content-Encoding: gzip in the response headers.
What is lightningcss and how does it differ from PostCSS?
lightningcss (formerly parcel-css) is a Rust-based CSS parser, transformer, minifier, and bundler. It is significantly faster than JavaScript-based tools (10-100x faster than cssnano). lightningcss performs: minification, vendor prefixing, CSS nesting transformation (for browser compatibility), color-level-4 syntax downleveling, and source maps. PostCSS is a JavaScript-based CSS transform tool with a plugin ecosystem (200+ plugins: autoprefixer, cssnano, postcss-preset-env). PostCSS is more flexible but slower. Vite 4+ uses lightningcss by default for CSS processing. Both handle minification well.
What percentage reduction should I expect from CSS minification?
Typical CSS minification results: whitespace and comment removal alone: 10-30% reduction. With shorthand optimizations (0px -> 0, #ffffff -> #fff, merging selectors): 20-40% reduction. After gzip compression (on top of minification): total of 70-85% reduction from original. Example: a 100KB CSS file might minify to 65KB (-35%), then gzip to 15KB (-85%). Tailwind CSS generates large utility CSS files (potentially 5MB for all utilities) but purging unused utilities + minification reduces this to 5-20KB for typical pages. Lightning-fast page loads require both minification and compression.