Why minify CSS?
Stylesheets block the page from appearing until they have downloaded, so smaller CSS means a faster first view of your website. Comments, indentation and line breaks help people read the code but are ignored by browsers. A CSS minifier removes them and makes a few other safe shortcuts, often cutting 20 to 40 percent of the file size.
How to use the CSS minifier
- Paste your stylesheet into the box.
- Click Minify CSS to compress it, or Beautify instead to turn minified CSS back into readable code.
- Copy the result or download it as
styles.min.css.
What the minifier changes
| Change | Before | After |
|---|---|---|
| Remove comments | /* Buttons */ | (removed) |
| Remove spaces and line breaks | color : red ; | color:red; |
| Drop last semicolon in a rule | {color:red;} | {color:red} |
| Remove units from zero | margin:0px | margin:0 |
| Shorten decimals | 0.50em | .5em |
| Shorten colors | #FFFFFF | #FFF |
| Remove empty rules | .x{} | (removed) |
Text inside quotes, such as content: "a b" or font names, is protected and never changed.
Best practice
Keep your original, commented stylesheet for editing and upload only the minified copy. Many developers name it with .min.css so the two are never mixed up. If your hosting supports Gzip or Brotli compression, turn it on too: compression and minification together give the smallest download.
Frequently asked questions
Will minified CSS look different on my site?
No. The rules are unchanged; only characters the browser ignores are removed.
Why is 0% not shortened to 0?
Some properties, such as keyframe percentages and certain functions, need the percent sign, so those are left as they are when they appear before a brace.
Can I minify SCSS or LESS?
Compile them to CSS first, then minify the CSS output.