CSS Minifier

Client-side CSS minification with real AST-level optimization. Live output.

CSS minification in your browser. Paste CSS, get minified output. Real AST-based minifier; nothing sent to a server. How to use ↓·Shortcuts ↓
Paste CSS, get minified output. csso under the hood.
Comments:
Samples:
CSS Input
Minified Output
Minified output will appear here.
Input: 0 bytesOutput: 0 bytesSaved: 0 bytes · 0%

How to use

Paste CSS into the input pane. The minified output appears on the right as you type (300ms debounce).

Toggle Restructure for aggressive optimization — merging duplicate selectors, hoisting common declarations, dropping unused rules. Turn it off if you need the output to preserve source order and structure.

Pick a Comments mode: None strips everything, Exclamation keeps /*! */ license banners, All preserves every comment.

Back to top

Keyboard shortcuts

Two shortcuts:

Cmd / Ctrl + KFocus the input pane
Cmd / Ctrl + EnterCopy output to clipboard
Back to top

When to use it

CSS minification saves bytes on production stylesheets, especially large frameworks or handwritten design systems.

  • Shipping a hand-authored stylesheet to a CDN without a build pipeline.
  • Checking how small a snippet becomes before wiring it into a bundler.
  • Compressing inline critical CSS for above-the-fold rendering.
  • Cleaning up copy-pasted CSS from a design tool.

When not to use: If you have a build pipeline (webpack, Vite, PostCSS), minify there — the output can then be integrated with source maps and hashed filenames.

Back to top

Options

Restructure — enables csso's AST-level optimizations: merge duplicate selectors, hoist shared declarations, remove unused rules from selector groups, optimize shorthand properties. Turn off if you need output that mirrors source structure line-for-line.

Comments:

  • None — strips every comment.
  • Exclamation — keeps only /*! ... */-style comments (used for license headers). Standard for open-source CSS.
  • All — preserves every comment.
Back to top

Format-specific gotchas

Restructure can reorder rules. Merging duplicate selectors and hoisting common declarations changes source order. If your CSS relies on specific declaration order for the cascade (rare but possible), turn Restructure off.

CSS variables are preserved. --custom-prop definitions and var(...) references pass through unchanged.

Vendor prefixes are preserved. csso doesn't remove -webkit- or -moz- prefixes unless they're unambiguously redundant. Use autoprefixer's --remove upstream if you want them dropped.

Unknown at-rules pass through. Non-standard at-rules (some framework macros) are kept as-is.

csso loads on first use. First minify triggers the library download; subsequent runs are instant.

Back to top

Privacy

Everything runs in your browser. Your CSS never leaves the page — no server, no logging, no analytics on the content.

Back to top

Frequently asked questions

What does CSS minification do?
Removes whitespace, comments, and redundant syntax. A proper minifier like csso also merges duplicate selectors, optimizes shorthand properties, and hoists common declarations. The result renders identically but ships smaller.
Is this the same as regex-based minification?
No. csso parses CSS into an AST and applies real optimizations. Regex-based minification only removes whitespace and can break on valid CSS constructs like nested media queries or complex selectors.
Will Restructure change my output layout?
It can — Restructure merges duplicate selectors and reorders declarations. This is safe in typical CSS but can change behavior if your styles rely on very specific cascade order. Turn Restructure off if you hit issues.
Are CSS variables and vendor prefixes preserved?
Yes. csso passes both through unchanged. If you want vendor prefixes stripped, use autoprefixer with the --remove flag as a preprocessing step.
Why does the first minify take a moment?
csso is loaded on demand — the first minify triggers the download. After that, minification is instant.
Does the tool send my CSS anywhere?
No. All minification happens in your browser. The input never leaves the page.
Back to top