Source CSS
paste or type · or drop a .css file
Minified

Why minify CSS?

Minification strips whitespace, comments, and redundant syntax without changing how a stylesheet behaves. Smaller CSS means a faster first paint, since the browser blocks rendering until it has parsed the stylesheet, a direct hit on Core Web Vitals like LCP. It is a standard step in every production build pipeline alongside bundling and gzip/brotli compression.

TypicalShrinks 20-40%
RemovesWhitespace, comments, redundant units
KeepsNested selectors, custom properties, modern syntax

How this minifier works

CSS minification here is powered by lightningcss, a Rust-based parser compiled to WebAssembly and run entirely in your browser tab. Because it is a real spec-compliant parser rather than a regex pass, it correctly handles nested selectors, CSS custom properties (variables), media queries, and modern syntax like container queries.

That matters: a naive whitespace-stripping regex can silently break a stylesheet that uses calc(), custom properties, or nested rules. lightningcss produces valid output because it actually understands the grammar it is compressing.

Before deploying minified CSS

Always keep your original, unminified source files under version control. Minified CSS is nearly unreadable in DevTools without a source map.

Most build tools (Vite, webpack, Rollup, Parcel) minify CSS automatically as part of their production build and can emit a source map alongside it. Use this tool for a quick one-off check or a snippet you are pasting somewhere; for a full project, let your build pipeline handle it.