Skip to content
HTMLSuite
Menu

CSS Minifier

Make stylesheets smaller by removing comments and unnecessary whitespace.

Input
627 B
Minified
477 B
Saved
150 B (23.9%)

CSS input

Tab inserts indentation. Press Escape, then Tab, to move focus out of the editor.

Minified CSS

How to minify CSS

  1. Paste your stylesheet on the left, or open a .css file.
  2. The minified CSS appears on the right, with the size before and after and the percentage saved.
  3. Decide whether to keep /*! license comments.
  4. Copy the result or download it as styles.min.css.

Example

Original
/* Card component */
.card > .title:hover {
  margin: 0 auto;
  width: calc(100% - 2rem);
  font-family: "Open Sans", sans-serif;
}
Minified
.card>.title:hover{margin:0 auto;width:calc(100% - 2rem);font-family:"Open Sans",sans-serif}

The comment and line breaks are gone, but the spaces inside calc() and between 0 auto stay — CSS needs them. The quoted font name is copied exactly.

Safe by design

Instead of search-and-replace rules, the minifier splits your CSS into tokens the way a browser does — strings, url(), comments, escapes, words and punctuation — and only removes whitespace where CSS ignores it. That's why it handles data URLs, content strings with { } or /* inside, custom properties, @media, @supports and @keyframes without surprises. It doesn't rewrite values, so #FFFFFF stays #FFFFFF.

Use cases

  • Shrinking a stylesheet for a static site or landing page without a build step.
  • Preparing CSS to inline in an HTML page or email.
  • Measuring how much a stylesheet shrinks before adding a build tool.

Other minifiers and formatters

Need to read minified CSS? Use the CSS formatter. Minify scripts with the JavaScript minifier and markup with the HTML minifier, which also compresses inline <style> blocks.

Frequently asked questions

Can minifying break my CSS?
Not with this minifier. It removes only comments and whitespace that CSS ignores, and keeps the spaces that matter — in calc(), between selector parts (div :hover vs div:hover) and after escapes. Values are never rewritten.
Why doesn't it shorten colors like #ffffff to #fff?
Rewriting values saves only a few bytes and every rewrite is a chance to change meaning. Most of the savings come from comments and whitespace, which this tool removes completely.
What are /*! comments?
Comments starting with /*! are license or copyright notices that many licenses require you to keep. They are kept by default; untick the option to remove them too.
What if my CSS has an error?
Unclosed comments, strings, url() or brackets are reported with their line and column instead of producing broken output.

Related tools