Free tool No sign-up
CSS Minifier
Paste any CSS and instantly get a minified, production-ready version — strips comments, whitespace, and redundant tokens with live size savings.
minifiercssperformancebuildoptimisation
Why minify CSS?
Faster page loads
Smaller CSS files mean fewer bytes over the wire and faster First Contentful Paint. On mobile networks, every kilobyte saved is real time saved for your users.
Less bandwidth, lower cost
Minified CSS typically shrinks 20–60% before gzip and another 10% after. At scale, that compounds into lower CDN bills and a smaller carbon footprint per request.
Better Core Web Vitals
CSS blocks rendering. Trimming whitespace and comments lets the browser parse your stylesheet sooner — directly improving LCP and lowering CLS risk from late-loading styles.
Production-ready output
Build pipelines minify automatically, but for one-off snippets, embedded styles, or quick experiments, a manual minify step gives you the same clean output without setting up tooling.
How to use this minifier
01
Paste your CSS
Drop in any CSS — a single rule, a full stylesheet, media queries, or @keyframes. Pasting works from VS Code, DevTools, Figma, or your design system docs.
02
Tweak the options
Toggle whether to keep /*! important comments, trim leading zeros (0.5 → .5), drop units on zero values (0px → 0), and shorten 6-digit hex colours (#ffffff → #fff).
03
Read the savings
The stats bar shows original size, minified size, bytes saved, and percentage reduction — handy for PR descriptions or before/after comparisons in commit messages.
04
Copy or download
Click Copy for the clipboard, or Download to grab a styles.min.css file. Either way the output is ready to drop straight into <style> tags or a CDN.
Minification rules at a glance
| Rule | Before | After |
|---|---|---|
Remove comments | /* card */ .a { ... } | .a{...} |
Collapse whitespace | .a { color : red ; } | .a{color:red} |
Drop trailing semicolon | color: red;} | color:red} |
Trim leading zero | opacity: 0.5 | opacity:.5 |
Drop units on zero | margin: 0px | margin:0 |
Shorten hex | color: #ffffff | color:#fff |
Strip space around tokens | a > b , c | a>b,c |
Keep /*! comments | /*! License */ | /*! License */ |
Minification patterns
Before
.btn {
display: inline-flex;
padding: 12px 24px;
/* primary action */
background-color: #ffffff;
border-radius: 8px;
opacity: 0.9;
margin: 0px;
} After
.btn{display:inline-flex;padding:12px 24px;background-color:#fff;border-radius:8px;opacity:.9;margin:0} @media
/* before */
@media (min-width: 768px) {
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
}
/* after */
@media (min-width:768px){.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}} Pro tips
01
Always gzip on top
Minification removes ~30% of bytes; gzip or Brotli on top removes another ~70%. Make sure your server (or CDN) has compression enabled — minify alone leaves performance on the table.
02
Don't minify what you author
Keep your source CSS readable and version-controlled. Minify only as a build step or right before deploy — never commit minified files alongside source files.
03
Preserve license comments
Open-source CSS often requires the licence header to ship with the bundle. Use /*! ... */ syntax and keep the option on so legal text survives minification.
04
Sourcemaps for debugging
When you minify in a real build (PostCSS, esbuild, Lightning CSS), generate a .map file so DevTools can show original line numbers. This tool produces a single-shot output without sourcemaps.