HCODX/CSS Minifier
100% browser-based · powered by CSSO

CSS Minifier — Minify CSS Online

Strip whitespace and comments, merge duplicate rules, shorten colors and units, and produce a tight production CSS bundle. Powered by CSSO — the same engine used by major build pipelines.

Drop CSS file
.css, .scss, .less, .txt
original.css
minified.css
Minification options
Original size
0 B
Minified size
0 B
Size reduction
0%
Bytes saved
0 B
450K+
Files Minified
60%
Average Reduction
35K+
Happy Developers
4.9 / 5
User Rating
Example

Strip the noise, keep the rules

Comments, redundant whitespace, repeated selectors, long color names — all gone, all without changing rendering.

Before
/* Buttons */
.button {
    background-color: #ff0000;
    margin: 0px 0px 0px 0px;
    padding: 10px 10px 10px 10px;
    font-weight: bold;
}

.button:hover {
    background-color: #ff0000;
    opacity: 0.8;
}
After
.button{background-color:red;margin:0;padding:10px;font-weight:700}.button:hover{background-color:red;opacity:.8}
Use cases

Where minified CSS pays for itself

Smaller CSS bundles, faster First Contentful Paint, lower bandwidth.

Performance budgets

30–60% smaller bundles directly improve First Contentful Paint and LCP scores.

Mobile networks

Every byte matters on cellular. Smaller stylesheets render faster on slow connections.

Bandwidth savings

For high-traffic sites, even 10 KB per request adds up to terabytes per month.

SEO & Core Web Vitals

Google factors page-load metrics into rankings; CSS minification is the simplest win.

Step by step

How to minify CSS

1

Paste or drop your CSS

Paste source CSS into the left editor or drop a .css file onto the upload area.

2

Pick options

Default is restructure ON, media-merge OFF (safer), strip comments ON. Adjust if your build needs comments preserved.

3

Click Minify

CSSO runs locally in your browser. The right editor fills with the minified result; stats below show the size reduction.

4

Copy or download

Copy with one click, or download as minified.css.

FAQ

Frequently asked questions

The process of removing unnecessary characters from a CSS file without changing rendering: whitespace, comments, redundant declarations, long color names like white → #fff, and so on. The output is functionally identical to the input but typically 30–60% smaller.

No, with one caveat: Merge media queries is off by default because reordering @media blocks can change cascade outcomes for edge cases (specificity ties resolved by source order). Leave it off unless you know your CSS is robust to reordering.

Toggle Strip comments off — the option becomes "exclamation" in CSSO, which preserves /*! … */ "important" license-header comments while still stripping ordinary ones.

All preserved. CSSO understands modern CSS — custom properties, calc(), container queries, @layer, color-mix, OKLCH, and so on. It only optimizes things it knows are safe.

No. CSSO is loaded as a static ES module from a CDN; everything runs in your browser.

About

About CSS minification

CSS minification is one of the cheapest performance wins in front-end development. The output is functionally identical to the input — just smaller. The savings flow through to download time, parse time, and (for cold caches) Largest Contentful Paint scores.

What this tool does

  • Strips comments, whitespace, semicolons before }, and other syntactic noise
  • Merges identical selectors
  • Shortens colors (#ffffff → #fff, rgb(255,0,0) → red) and units (0px → 0, 0.5em → .5em)
  • Restructures rules to use shorthand where possible
  • Optionally merges @media queries (off by default — see the FAQ)

Powered by CSSO

The transformation engine is CSSO, the same library used by Yandex's frontend platform and many build tools. It understands modern CSS — custom properties, calc(), container queries, @layer, color functions — and only applies optimizations that are provably safe.

What it doesn't do

  • PurgeCSS-style dead-code elimination. CSSO doesn't know which selectors your HTML uses. Pair with PurgeCSS or your framework's own pruner if you need that.
  • Vendor-prefix management. Use Autoprefixer or PostCSS for that.
  • Source maps. If you need debug-friendly minified CSS, run CSSO from your build pipeline with the sourceMap option.