CSS
Minifier
Remove comments, collapse whitespace, and optimize your CSS. Fast, free, and entirely in your browser.
How It Works
Paste CSS
Paste or type your CSS code into the input area.
Minify
Click Minify to remove comments and optimize whitespace.
Copy or Download
Copy the minified code or download it as a .css file.
Minify CSS online to ship smaller stylesheets, reduce render-blocking time, and improve Lighthouse performance scores. ConverterUp's CSS minifier strips whitespace, removes comments, shortens hex colors, merges duplicate rules, and produces a compact output ready to deploy. Front-end developers, theme authors, and WordPress users can paste a stylesheet, copy the minified result, and serve it from their site or CDN. The processing happens entirely in your browser, so internal design systems and client stylesheets are never uploaded to a third party.
What gets compressed in a CSS file
Whitespace and newlines are removed everywhere they are not significant — between selectors, before braces, after semicolons, inside calc() expressions where the spec allows it. The final semicolon before } is dropped because CSS treats it as optional. A typical 50 KB hand-written stylesheet shrinks to 30–35 KB from whitespace removal alone.
Comments (/* ... */) are stripped except for license preservation comments that start with /*! — the convention for keeping copyright headers in the output. Special build-time directives (/* purgecss start ignore */, /* stylelint-disable */) are removed since they only matter to upstream tools, not browsers.
Color shorthand compresses #FFFFFF to #FFF, rgb(255, 255, 255) to #FFF, rgba(0, 0, 0, 0.5) to #0008 (4-digit hex with alpha), and named colors to their shortest representation (white stays white because it is 5 chars; black becomes #000). Modern browsers accept all of these interchangeably.
Numeric and dimensional shorthand: 0.5em becomes .5em, 0px becomes 0 (zero needs no unit), margin: 10px 10px 10px 10px becomes margin: 10px. Duplicate selectors with identical declarations get merged. Duplicate declarations within a single rule keep only the last one (since later rules override earlier ones).
ToolSeo.css-minifier.section1.p5
Lossless vs aggressive optimizations
Lossless mode applies only transformations that produce byte-identical computed styles in every browser. This is the safe default. It includes whitespace, comments, shorthand notation, and zero-unit removal. The output is structurally different but semantically identical to the input; no edge case can break.
Aggressive mode goes further: merges adjacent rules with shared declarations (a {color: red} b {color: red} becomes a,b {color: red}), drops vendor prefixes for features now natively supported (-webkit-border-radius is unnecessary in 2024), and reorders declarations within a rule to maximize compression after gzip. These are safe in 99 % of cases but can occasionally surface a pre-existing bug masked by source ordering.
What aggressive mode does NOT do: it does not remove unused selectors (that requires DOM analysis — use PurgeCSS), it does not change specificity (merging selectors keeps cascade order), it does not inline custom properties (a --brand-primary stays a variable so runtime theme switching works), and it does not drop vendor prefixes that still matter for older Safari/Firefox.
Real-world savings: a 100 KB unminified design-system CSS typically goes to 60 KB minified, 18 KB gzipped, 14 KB brotli. That last number is what the browser actually downloads on a modern HTTPS connection. Minification helps the parser unpack faster more than it saves bandwidth — gzip already deduplicates most of the whitespace wins.
ToolSeo.css-minifier.section2.p5
Critical CSS vs full minify
Critical CSS is a different optimization than minification, often confused with it. Critical CSS extracts only the rules needed to render the above-the-fold content of a specific page, inlines that into a <style> tag in <head>, and lazy-loads the full stylesheet. This eliminates the render-blocking round trip and improves Largest Contentful Paint by 200–800 ms on slow connections.
You want both. Critical CSS reduces the bytes that block render. Minification reduces every byte. Combine them: extract the critical subset (12–20 KB raw), minify it, inline it. Load the rest of the stylesheet asynchronously with <link rel='preload' as='style' onload='this.rel="stylesheet"'> or modern media='print' onload='this.media="all"' hacks.
Tools for critical CSS: critters (used by Next.js when experimental.optimizeCss is on), critical (Penthouse-based, by Addy Osmani), beasties (active fork of critters). For static sites, run critical-CSS extraction per route at build time. For SSR apps, do it per page on first request and cache the result.
When critical CSS is overkill: small sites with a single global stylesheet under 30 KB. Inlining the whole thing is simpler than splitting it and the LCP gain is marginal. Critical CSS pays off when the full stylesheet is >50 KB and the home page only needs 15 KB of it.
ToolSeo.css-minifier.section3.p5
ToolSeo.css-minifier.section4.heading
ToolSeo.css-minifier.section4.p1
ToolSeo.css-minifier.section4.p2
ToolSeo.css-minifier.section4.p3
ToolSeo.css-minifier.section4.p4
ToolSeo.css-minifier.section4.p5
ToolSeo.css-minifier.section5.heading
ToolSeo.css-minifier.section5.p1
ToolSeo.css-minifier.section5.p2
ToolSeo.css-minifier.section5.p3
ToolSeo.css-minifier.section5.p4
ToolSeo.css-minifier.section5.p5
Frequently asked questions
How much can CSS usually be reduced?
Expect 20-40 % size reduction on typical stylesheets. Combined with gzip or brotli compression on the server, most sites end up serving CSS under 30 KB even for full design systems.
Are CSS variables and modern features supported?
Yes. Custom properties, calc(), nested at-rules, container queries, and CSS Layers are all preserved. Vendor prefixes are kept untouched so cross-browser compatibility is not affected.
Does it remove unused selectors?
No. The minifier focuses on safe size reduction. Removing unused selectors requires knowing which HTML actually uses them, which only a tool like PurgeCSS can do during build time.
What is the maximum stylesheet size?
Up to 10 MB per file, which covers any realistic design system. Most production stylesheets are under 200 KB before minification.
Does the minifier preserve source maps?
Source map generation is opt-in. Enable <em>'output source map'</em> and the tool emits a <code>.css.map</code> alongside the minified output, with mappings back to the original lines and columns. Reference it via <code>/*# sourceMappingURL=foo.css.map */</code> at the end of the minified file. DevTools then shows the original (pretty) source while serving the minified bytes.
Why does my minified CSS sometimes look smaller than expected?
The most likely cause is that your input already contains few comments and little whitespace — typical of CSS that went through Sass or PostCSS, which produces semi-compact output even without an explicit minify step. The minifier still trims further, but the marginal gain on already-compact CSS is 5–10 % rather than the typical 30 %. Compare bytes pre- and post-gzip for a realistic comparison; the wire savings are usually similar regardless.
ToolSeo.css-minifier.q7
ToolSeo.css-minifier.a7
ToolSeo.css-minifier.q8
ToolSeo.css-minifier.a8