CSS minifier

How to use it

1. Paste CSS into the left box.
2. Click Minify CSS. The message shows the size before and after.
3. Copy the result into your build output or CDN.

What the minifier does

It uses CSSO, which goes beyond removing whitespace and comments:

• Shortens values: #ffffff becomes #fff, 0px becomes 0, and margin: 0 0 16px 0 becomes margin:0 0 16px.
• Merges rules: two blocks with the same selector are combined, and identical declarations shared by several selectors can be grouped.
• Removes overridden declarations inside a rule when a later one wins.

Should you minify CSS by hand?

For a production app, minification belongs in the build: Vite, webpack, Next.js and Parcel all minify CSS by default (usually with Lightning CSS, esbuild or cssnano). This tool is for the cases outside a build pipeline: a CMS custom-code field, an email template, a quick embed, or checking how much a stylesheet would shrink.

Minify vs compress

Minification rewrites the CSS itself. Compression (gzip or Brotli) is applied by your server or CDN on top of that. Do both: compression typically cuts text assets by 70% or more, and minifying first still saves additional bytes.

FAQ

Can minifying break my CSS?

Rarely. Structural merging is designed to be safe, but if you rely on a specific rule order for overrides across files, test the result. Keep the unminified source in your repository.

Is my CSS uploaded?

No. Minification runs in your browser.

Does it support modern CSS like nesting and custom properties?

Custom properties, media queries, grid and container queries are supported. Native CSS nesting support depends on the parser version, so check the output if you use it heavily.

Is it free?

Yes. See all free tools at ryzlabs.com/tools.