CSS Minifier & Beautifier
Minify CSS to reduce file size, or beautify it for readability. 100% client-side — your code never leaves your browser.
No data sent to serverRelated Tools
What is CSS Minification?
CSS minification removes whitespace, newlines, comments, and redundant characters from CSS source code without changing the browser's behavior. The result is a smaller file that loads faster, parses faster, and contributes to better Core Web Vitals — particularly LCP (Largest Contentful Paint), since CSS is render-blocking.
Why bytes matter
Browsers can't render any text on the page until they've downloaded and parsed the CSS in <head>. Every kilobyte adds to the time before First Contentful Paint. On 3G mobile (~250 KB/s effective), saving 50 KB of CSS saves 200 ms of render time. Compounded across millions of page views, minification is one of the highest-leverage performance wins.
Minify vs gzip vs Brotli
These complement each other. Minification removes redundant characters at the source level — readable minified CSS still benefits from compression on top. Gzip (default for HTTP) compresses the already-minified bytes ~50% further. Brotli (modern alternative) gives another 5–15% over gzip for text content. Always do all three: minify → gzip/Brotli → cache.
How to Use This Tool
- Paste your CSS into the input field on the left.
- Click Minify (or press
Ctrl+Enter/Cmd+Enter) to compress. - Click Beautify to format and indent the CSS for readability — useful for inspecting third-party minified bundles.
- The byte savings panel shows original size, minified size, and percentage saved.
- Click Copy to copy the result to clipboard.
Privacy: Everything runs in your browser. No CSS is sent to any server.
What this minifier does
- Removes comments —
/* ... */blocks (preserves/*! ... */license headers if needed) - Strips whitespace — newlines, tabs, leading/trailing spaces, spaces around
{ } : ; , - Removes last semicolon in each rule (
color:red;}→color:red}) - Compacts colors —
#FFFFFF→#fff,rgb(255,0,0)→redwhen shorter - Removes empty rules — selectors with no declarations
- Collapses multiple zeros —
0px→0,0.5→.5
Beyond what minification can do (build-tool territory)
- Tree-shaking — remove unused selectors. Requires HTML/JS analysis (PurgeCSS, Tailwind JIT).
- Critical CSS extraction — split above-the-fold styles for inline. Tools: critters, beasties.
- Selector mangling — rename
.long-class-nameto.a. Loses readability for ~5% extra savings. - Property merging — combine
margin-top/right/bottom/leftinto shorthandmargin. - Vendor prefix cleanup — drop prefixes for browsers you don't support (autoprefixer).
Typical savings
Hand-written CSS with comments: 20–40% reduction. Already-formatted CSS without comments: ~10–20%. After gzip, minified CSS is typically 70–80% smaller than the source. CSS-in-JS frameworks (styled-components, Emotion) generate already-minified output and gain less from this tool.
Common Pitfalls
1. Removing important license headers
Open-source CSS often starts with /*! Copyright ... */ — the ! indicates a "preserved" comment. Strict minifiers strip these unless explicitly told not to. Removing the license can violate MIT/Apache attribution requirements. When minifying third-party CSS, scan for /*! and preserve.
2. Spaces inside calc() are required
calc(100% - 20px) needs spaces around the minus sign. Aggressive minifiers that remove all whitespace can produce calc(100%-20px) — invalid, browsers ignore. Modern minifiers know this; verify with a visual regression test.
3. Color compaction can change values
rgba(255, 0, 0, 1) → red is safe. rgb(254, 254, 254) → #fefefe is safe. But color: rgba(0, 0, 0, 0.5) can't be shortened to a named color. Watch for over-aggressive color compaction in custom minifiers.
4. CSS variables (custom properties)
--my-var: 10px; values are kept verbatim — the minifier can't reorder or merge them. Custom property names also can't be safely renamed without scanning all consumers. Use minifier-aware tools (esbuild, lightningcss) for full dead-code elimination.
5. Source maps are needed for debugging
Minified CSS is unreadable in DevTools without a source map. Always generate .css.map alongside your minified output and serve it conditionally (only for users with ?dev query, or always behind auth). Modern build tools (Vite, Next.js, esbuild) produce source maps by default.
Frequently Asked Questions
Will minification break my CSS?
No, if the minifier is correct. Minification only removes characters with no effect on browser interpretation — whitespace, comments, optional semicolons. The cascade and rendered output are identical.
How much can I expect to save?
Hand-written CSS with comments: 20–40%. After gzip on top: 70–80% total reduction. CSS already produced by build tools (Webpack, esbuild) is usually pre-minified — gains will be small.
Should I minify CSS in development?
No. Minified CSS is hard to debug — DevTools shows everything on one line, line numbers don't match your source. Production builds: minify. Development: leave readable. Modern tooling does this automatically based on NODE_ENV.
What about minifying inline <style>?
Same idea — every byte counts, especially since inline styles are part of the HTML and block first paint. Tools like Critters/beasties extract critical CSS and inline it pre- minified for above-the-fold optimization.
What's the best CSS minifier for build pipelines?
lightningcss (Rust-based, fastest, used by Vite and Bun) for new projects. cssnano (PostCSS plugin) for compatibility with the PostCSS ecosystem.esbuild's built-in minifier for speed. All produce equivalent output for typical CSS.
Do CDNs minify CSS automatically?
Cloudflare's "Auto Minify" did, but was deprecated in 2024 — the recommended approach is to minify at build time. Some hosts (Vercel, Netlify) minify automatically as part of deployment.
⚠️ Reference Only
Output is generated based on your input and is provided for reference. Results may vary depending on your specific use case, edge cases, or environment-specific behavior. We do not guarantee accuracy of conversions, validations, or computed values.
Always verify critical outputs against official documentation or production environments. We are not responsible for any decisions or losses based on these tool results.
📖 Related Guides
HTTP Caching — Cache-Control, ETag, and CDN
Production caching patterns. RFC 9111, stale-while-revalidate, the bugs that cost real money.
UUID v4 vs ULID — Which to Choose?
Compare UUID v4 and ULID for distributed systems. Performance, sortability, and use cases.
JWT Anatomy — Header, Payload, Signature
Understand JWT structure, claims, and signing algorithms. Security best practices.