CSS minification removes whitespace, comments, and redundant characters from your stylesheet without changing how it works. A 100KB stylesheet can typically be reduced to 60–70KB after minification — a meaningful improvement for page load time.
What does CSS minification do?
A minifier performs several transformations:
- Removes all comments (
/* ... */) - Removes unnecessary whitespace, tabs, and newlines
- Removes whitespace around operators (
:,;,{,},,) - Removes trailing semicolons before closing braces
- Converts
#ffffffto#fffwhere possible (some minifiers)
Before and after example
Before (148 bytes):
/* Main navigation styles */
.nav {
display: flex;
align-items: center;
padding: 16px 24px;
background-color: #ffffff;
}
After (72 bytes):
.nav{display:flex;align-items:center;padding:16px 24px;background-color:#ffffff}
That's a 51% size reduction on this snippet alone.
How minification improves Core Web Vitals
CSS is a render-blocking resource — the browser won't paint the page until it has downloaded and parsed all CSS. Smaller CSS files:
- Load faster over the network
- Parse faster in the browser engine
- Improve Largest Contentful Paint (LCP) and Time to First Byte (TTFB)
- Are more effectively compressed by gzip/Brotli at the server level
How to minify CSS online
- Go to CSS Minifier
- Paste your CSS into the input panel
- Click Minify — output appears instantly
- Copy the minified CSS or download as a
.cssfile
How to beautify minified CSS
If you've received minified CSS (e.g., from a vendor library) and need to read or edit it:
- Switch to Beautify mode
- Paste the minified CSS
- The tool adds proper indentation and line breaks
When to minify CSS
- Always minify CSS in production builds
- Use build tools (webpack, Vite, PostCSS with cssnano) for automated minification in CI/CD pipelines
- Use the online tool when you need a quick one-off minification without a build setup