CSS Minify — Compress and Shrink CSS Files Online
🔒 Runs in your browser — nothing is sent to a serverCSS minify any pretty-printed or hand-written stylesheet into the smallest valid representation in a single click. Paste a Tailwind utility export, a Bootstrap override, an SVG-icon stylesheet or any CSS blob, and this CSS minifier strips whitespace, removes comments, drops the trailing semicolon in each block, shortens hex colors, drops leading and trailing zeros from numbers, and converts zero-with-length units to a bare 0. License comments (`/*! ... */`), `var(--my-var)`, vendor prefixes and `!important` are preserved untouched. Everything runs 100% inside your browser; your input never leaves your device, nothing is uploaded, logged or sent to any server.
When to use a CSS minifier online
You reach for a CSS minifier any time a stylesheet is about to travel across a constrained channel: a critical-path CSS extraction inlined into the `<head>`, an above-the-fold theme served on the landing page, a Tailwind purge output ready for a CDN deploy, an SVG sprite bundling its own scoped styles, or a third-party widget injecting CSS into the host page. Browser-local CSS minification means the stylesheet never touches a remote server during the transform — important when the CSS contains unreleased design tokens, white-label brand colors, A/B test variants or admin-only themes you would rather not leak to a SaaS minifier.
How CSS minifying works under the hood
CSS minifying is a two-pass pipeline. The first pass walks the input character by character with a small state machine that tracks whether the cursor is inside a string literal, a `/* … */` comment, a selector, an at-rule prelude or a declaration block. Inside that walk, runs of whitespace collapse to a single space, whitespace adjacent to `{`, `}`, `;`, `,` and the declaration-position `:` is removed entirely, the redundant trailing `;` before `}` is dropped, ordinary comments disappear and license `/*! … */` comments are kept verbatim. The second pass walks the already-compact output token-aware: it lowercases hex colors, shortens `#aabbcc` → `#abc` when each digit pair matches, removes leading zeros from sub-unit decimals (`0.5em` → `.5em`), trims trailing zeros (`1.50rem` → `1.5rem`), and converts zero-with-length-or-percentage to a bare `0` while preserving `0s` and `0ms` because `transition` and `animation` require a time unit. The whole pipeline runs inside the browser, so a multi-thousand-line stylesheet minifies in milliseconds without leaving your tab.
Examples
.card {
padding: 12px;
margin: 0px;
background-color: #FFFFFF;
border: 1px solid #cccccc;
border-radius: 0.25rem;
}
.card:hover {
background-color: #aabbcc;
}.card{padding:12px;margin:0;background-color:#fff;border:1px solid #ccc;border-radius:.25rem}.card:hover{background-color:#abc}.hero {
opacity: 0.85;
width: 100%;
height: 100vh;
margin-top: 0em;
font-size: 1.50rem;
transition: opacity 0.3s ease, transform 0ms linear;
}.hero{opacity:.85;width:100%;height:100vh;margin-top:0;font-size:1.5rem;transition:opacity .3s ease,transform 0ms linear}/* normalize spacing — internal note */
/*! Copyright 2026 Acme — MIT */
:root {
--brand: #ff8800;
--gap: 16px;
}
.banner {
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
background: var(--brand) !important;
}/*! Copyright 2026 Acme — MIT */ :root{--brand:#f80;--gap:16px}.banner{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:var(--brand)!important}.css-minify {
content: "css minify online";
font-family: "Inter", sans-serif;
color: #112233;
padding: 0.5rem;
}.css-minify{content:"css minify online";font-family:"Inter",sans-serif;color:#123;padding:.5rem}