DevSwitch.net
Sign in
Back to Tools
{ }

CSS Minifier

Minify CSS code to reduce file size

Code Tools

Tip: Paste your CSS code and click Minify to compress it by removing whitespace and comments, reducing file size for faster loading.

Runs in your browser

Input CSS Code

Minify CSS safely

Paste a stylesheet and press Minify Code. The CSS minifier strips comments, line breaks and every space the browser doesn't need, then shows the size before and after and the percentage saved. Copy the result or download it as a .css file.

Safe CSS minification removes only what can't change how the CSS works. Colors, numbers, selectors and the order of your rules stay exactly as written, so the minified file behaves like the original in every browser.

Before and after

Real output for a short stylesheet: 213 bytes become 156, 27% smaller.

styles.css 
/* Buttons */
.btn {
  padding : 8px 16px;
  font-family: "Fira  Sans", sans-serif;
}

.nav :hover {
  color: #ff0000;
}

@media screen and (max-width: 600px) {
  .btn > .icon {
    width: calc(100% - 2rem);
  }
}
styles.min.css 
.btn{padding:8px 16px;font-family:"Fira  Sans",sans-serif}.nav :hover{color:#ff0000}@media screen and (max-width:600px){.btn>.icon{width:calc(100% - 2rem)}}

Spaces a minifier must not remove

The example keeps four spaces on purpose. A minifier that strips them all produces CSS that looks fine and breaks:

  • Kept

    .nav :hover

    Why

    The space is a descendant selector: any hovered element inside .nav. .nav:hover would mean .nav itself is hovered.

  • Kept

    and (max-width:600px)

    Why

    Media queries need the space before the bracket. Written as and(max-width:600px), the query is invalid and the rules inside it never apply.

  • Kept

    calc(100% - 2rem)

    Why

    + and - inside calc() need spaces around them, or the value is invalid.

  • Kept

    "Fira Sans"

    Why

    Text inside quotes is left alone: font names, content values and attribute selectors keep their exact spacing.

What it does and doesn't do

Does

  • Removes every comment, including /*! */ license comments
  • Removes line breaks, indentation and spaces around { } ; , > ~ and after colons
  • Drops the last semicolon before each }

Doesn't

  • Shorten colors such as #ff0000 to #f00, or 0px to 0
  • Merge or reorder rules, or remove unused selectors
  • Add vendor prefixes or check the CSS for errors

Keep a copy of the license comment if a library requires it in the shipped file, and keep the readable source for editing: the CSS beautifier can put the line breaks back, but not your comments.

CSS minifier questions

It depends on how much of the file is comments and indentation: the example above lost 27%. The result shows the exact numbers for your file. With gzip or brotli on the server, both versions shrink much further and the gap gets smaller.

Not with this tool: it removes only whitespace and comments that never carry meaning, and keeps the spaces shown above. CSS that was already broken stays broken, since nothing is validated.

Yes, the two go together: minify for size, then give the file a name that changes with its content so browsers fetch the new version. How that works is in what is cache busting.

Paste the whole page into the HTML minifier. It minifies <style> blocks with the same rules and the HTML around them too.

No. Minifying runs in your browser.