DevToolsmith

CSS Minifier

Paste CSS to minify it with CSSO: whitespace and comments go, colors and values get shorter, and identical rules are merged. License comments stay, and you can see the real gzip savings.

Runs 100% in your browser — nothing is uploaded

Automatically minifies up to 1 million characters.

CSS
Tip: drop a file here379 chars · 379 bytes · 26 lines
Minified CSS
0 chars · 0 bytes · 0 lines

Example

Before
/* Primary button */
.button {
  color: #ffffff;
  background-color: #ff0000;
  margin: 0px 0px 0px 0px;
}

.alert {
  color: #ffffff;
  background-color: #ff0000;
  margin: 0;
}
After
.alert,.button{color:#fff;background-color:red;margin:0}

Both rules had the same declarations, so they were merged into one rule with two selectors.

What minification does

StepEffect
Whitespace and comments Removed, except /*! … */ comments, which by convention hold licenses.
Shorter values #ffffff becomes #fff, #ff0000 becomes red, 0px becomes 0 and margin: 0 0 0 0 becomes margin: 0.
Merged rules Rules with identical declarations are combined into one selector list, and repeated selectors are merged.
Removed duplicates A declaration overridden later in the same rule is dropped.

Minify on the command line

# CSSO, the minifier used here
npx csso styles.css --source-map file --output styles.min.css

# Lightning CSS: also adds vendor prefixes for your browserslist
npx lightningcss --minify --sourcemap styles.css -o styles.min.css

To read minified CSS, use the CSS Formatter. For scripts, there is a JavaScript Minifier.

Frequently asked questions

How do I minify CSS?

Paste your stylesheet or drop a .css file into the minifier above. It removes whitespace and comments, shortens colors and values, and merges rules that have the same declarations. The size before and after, with and without gzip, is shown under the output.

Can merging rules change how my page looks?

CSSO only moves rules when it can prove the result is the same, taking specificity and order into account. If something looks different, untick Merge rules to keep the original structure and only remove whitespace and shorten values.

Does it support CSS variables, nesting and modern syntax?

Custom properties (--brand), calc(), media and container queries, @layer and other current CSS are kept. Stylesheets that use native CSS nesting are minified more carefully: comments and whitespace are removed, but rules are not merged. SCSS and Less have to be compiled to CSS first.

Why was part of my CSS dropped?

CSS that can’t be parsed, such as a stray } or a missing selector, is skipped, as a browser would do. The minifier lists each spot with its line and column so you can fix it.

How much smaller will my CSS get?

Usually 15–40% before gzip, more for hand-written CSS with comments and indentation. After gzip the difference is smaller, because gzip already compresses repeated whitespace well; the table shows both.