Input CSS
Output
Minified CSS appears here as you type...
What this tool does
Free CSS minifier — compress and optimize CSS online
CSS is render-blocking — the browser must download and parse every stylesheet before it can paint any content on screen. Every byte of CSS delays First Contentful Paint. Minifying CSS removes everything semantically irrelevant: whitespace, comments, redundant semicolons, zero-value units. The result is identical rendering with a smaller, faster file. Most stylesheets see 20-40% reduction from minification alone, and up to 90% when combined with gzip or Brotli server compression.
Most free CSS compressors online only strip whitespace and comments. This tool also runs color optimization (converting rgb() values and verbose 6-digit hex to their shortest valid form), shorthand optimization (collapsing redundant box values like padding:8px 16px 8px 16px to padding:8px 16px), and duplicate selector detection — a bug-catching feature that flags when the same selector appears more than once, causing silent rule overrides. The visual Diff tab highlights removed content in red, and the Report tab logs every change applied.
What gets optimized
Comments removed
All /* ... */ blocks stripped. String literals and url() values are never touched.
Whitespace collapsed
Tabs, newlines, and spaces collapsed to the minimum needed without corrupting string content.
Color optimization
rgb(255,0,0) to #f00, #aabbcc to #abc, and named colors shortened where hex is fewer characters.
Shorthand optimization
margin:10px 10px to 10px, padding:8px 16px 8px 16px to 8px 16px. Handles margin, padding, border-radius, border-width, border-color, inset.
Zero units removed
0px, 0em, 0rem to 0. Units on zero values are always redundant in CSS.
Duplicate detection
Flags selectors defined more than once — the last definition wins and earlier rules are silently lost.
Examples
CSS minification — before and after
Real examples of each optimization type. Click Load Sample in the tool above to run a full pass yourself.
Example 1
Comment and whitespace removal
Comments and redundant whitespace are stripped. A typical stylesheet with developer comments can see 30%+ reduction from this step alone.
Before — 111 bytes
/* Primary button styles */
.btn-primary {
background-color: #0066ff;
color: white;
padding: 12px 24px;
}
After — 64 bytes
.btn-primary{background-color:#06f;color:#fff;padding:12px 24px}
Example 2
Color optimization
rgb() functions are converted to hex, 6-digit hex codes are shortened to 3-digit where possible, and safe named colors are replaced with shorter hex equivalents.
Before — 136 bytes
.card {
background-color: rgb(255, 255, 255);
border-color: #aabbcc;
color: #000000;
box-shadow: 0px 2px 8px rgba(0, 0, 0, 1);
}
After — 83 bytes
.card{background-color:#fff;border-color:#abc;color:#000;box-shadow:0 2px 8px #000}
Example 3
Shorthand and zero-unit optimization
Redundant box shorthand values are collapsed, zero values lose their units, and trailing semicolons before closing braces are removed.
Before — 119 bytes
.section {
margin: 0px auto 0px auto;
padding: 24px 24px 24px 24px;
border-radius: 8px 8px 8px 8px;
top: 0px;
}
After — 60 bytes
.section{margin:0 auto;padding:24px;border-radius:8px;top:0}
Example 4
Real-world component — full pass
A typical navigation component with comments, verbose formatting, and unoptimized colors. All optimizations applied in a single pass.
Before — 303 bytes
/* Navigation component */
.nav {
display: flex;
align-items: center;
background-color: #1a1a2e;
padding: 16px 32px 16px 32px;
border-bottom: 1px solid rgb(255, 255, 255);
}
.nav-link {
color: white;
padding: 8px 16px 8px 16px;
border-radius: 6px 6px 6px 6px;
text-decoration: none;
}
After — 186 bytes
.nav{display:flex;align-items:center;background-color:#1a1a2e;padding:16px 32px;border-bottom:1px solid #fff}.nav-link{color:#fff;padding:8px 16px;border-radius:6px;text-decoration:none}
FAQ
Frequently asked questions
What does CSS minification do?
CSS minification removes everything that is not needed to render styles correctly: comments, extra whitespace, newlines, redundant semicolons, and zero-value units. It also optimizes values — converting verbose color functions to shorter hex codes, collapsing redundant box shorthand values, and removing units from zero values. The result is identical visual rendering with a smaller, faster-to-transfer file. Whitespace, comments, and redundant semicolons are removed first, then property values are shortened and duplicate rules merged.
How much does CSS minification reduce file size?
Typically 20-40% for hand-written CSS with comments and formatting. Combined with gzip or Brotli compression at the server level, total savings often reach 80-90%. A 50 KB stylesheet can commonly become under 10 KB delivered over the network. Typical savings range from 15-40% depending on how much whitespace, comments, and verbose shorthand the original contains. Production stylesheets with lots of comments and developer-friendly spacing tend to see the largest savings.
Why does CSS file size matter for performance?
CSS is render-blocking — the browser must download and parse all stylesheets before it can paint any content. Larger CSS files mean a longer blank screen. Reducing CSS size directly improves First Contentful Paint (FCP) and Largest Contentful Paint (LCP), which are Core Web Vitals that affect both user experience and Google search rankings. Every kilobyte saved in a stylesheet reduces the render-blocking resource load and speeds up the browser's first paint.
How does the color optimization work?
Three color passes run: 6-digit hex codes like #aabbcc are shortened to 3-digit #abc where possible; rgb() and rgba() values are converted to their shortest hex equivalent; and safe named colors like red, white, and black are replaced with shorter hex codes where the hex is fewer characters. All optimizations are mathematically exact — no approximation. Color shortening and value collapsing are applied only when the result is guaranteed to render identically in every browser.
What CSS shorthand optimizations are applied?
Box properties with redundant values are collapsed: margin:10px 10px 10px 10px becomes margin:10px, padding:8px 16px 8px 16px becomes padding:8px 16px, and border-radius:8px 8px 8px 8px becomes border-radius:8px. The optimizer handles margin, padding, border-radius, border-width, border-color, and inset. These multi-value properties are collapsed to their shortest valid representation, cutting several bytes per occurrence. On large stylesheets with many rules, shorthand collapsing alone can save hundreds of bytes.
What is duplicate selector detection?
If the same CSS selector appears more than once, the second block silently overrides all conflicting properties from the first — which is almost always a bug. The Report tab flags every selector defined more than once so you can intentionally merge them. Most other online CSS minifiers do not include this check. Duplicate selectors are a common result of copy-paste authoring or merging multiple CSS files into one.
Is my CSS sent to any server?
No. All minification runs entirely in your browser using JavaScript. Nothing is transmitted to any server. Your CSS code never leaves your device. The minifier runs entirely in your browser using a JavaScript parser -- no uploads, no accounts, no logs. Paste your CSS into the tool above and the minified result is ready to copy within milliseconds. Minification happens instantly in your browser -- paste your CSS and the minified result appears within milliseconds.
Is the minified CSS still valid?
Yes — fully valid CSS. Every rule, property, and value is preserved exactly. Only whitespace, comments, and redundant syntax are removed. The minified output renders identically to the original in all browsers. Only whitespace-level and value-level transformations are applied -- no structural changes that could affect specificity or cascade order. Whitespace removal, comment stripping, and value shortening are the only transformations applied, preserving full CSS semantics.
When should I use this vs a build tool like PostCSS or esbuild?
For production deployments with a build pipeline, use PostCSS with cssnano, esbuild, or Vite — they minify automatically on every build. Use this tool for quick manual work: reviewing output on specific files, auditing stylesheets for duplicate selectors, checking how much a file can be reduced, or minifying CSS without setting up a build tool. For one-off minification tasks or quick checks, this browser tool is faster than configuring PostCSS or a webpack pipeline.
What is the difference between CSS minification and CSS compression?
CSS minification removes redundant characters at the source level — the output is still valid, human-readable CSS. CSS compression refers to gzip or Brotli encoding applied by the web server at transfer time. Both are complementary — minify the source first, then let the server compress the transfer. This tool handles minification. Minification and compression are complementary -- use both together for the smallest possible payload delivered to the browser.
Need a disposable email? Generate a free, instant throwaway — zero signup, zero trace.
Get Free Temp Mail