CSS Minifier

Smaller CSS, Faster Pages

Every stylesheet you write is full of things browsers don't need: indentation, line breaks, comments and extra spaces. They make the code easy for people to read, but each one is a byte your visitors have to download. On a phone with a weak signal, those bytes add up and slow down the moment your page first appears.

A CSS minifier strips all of that out while keeping your styles exactly the same. Paste your code into the box above and the compressed version appears instantly on the right, along with how many bytes you saved. Your code is processed in your own browser and never uploaded anywhere.

How to Use the CSS Minifier

1. Paste your CSS into the Input CSS box, open a .css file, or simply drag one onto the box.
2. The minified result shows up straight away. There is no button to press.
3. Check the Size Savings panel to see the original size, the new size and the gzipped size.
4. Click Copy to grab the result, or Save to download it as a .min.css file.

What the Minifier Changes

• Whitespace and line breaks are removed wherever the browser doesn't need them.
• Comments are deleted, except license comments that start with /*!, which you are usually required to keep.
• Colors are shortened when possible, so #FFFFFF becomes #fff.
• Numbers lose unnecessary zeros: 0.50em becomes .5em, and 0px becomes 0.
• Empty rules with no declarations are removed, along with the final semicolon in each block.

Every option can be switched off if you prefer a lighter touch.

Safe by Design

Careless minifiers sometimes break working CSS. This one is built to avoid the usual traps. Text inside quotes, such as content values and font names, is never touched. URLs stay exactly as written. Spaces inside calc() are kept, because calc(100% - 10px) stops working without them. Zero units inside calc() and flex values are left alone, and custom properties like --gap keep their values untouched.

It was tested by having the browser read both the original and the minified versions of a real 74 KB stylesheet and comparing every one of its 500 rules. They matched.

Beautify Messy CSS

Sometimes you need to go the other way. Maybe you have inherited a squashed one-line file, or you want to read the CSS a website ships. Switch the output to Beautify and the tool lays it out with clean indentation, one declaration per line and a blank line between rules. It is a quick way to understand code you didn't write.

Does Minifying Really Make a Difference?

For a typical stylesheet, minifying removes around 20 to 40 percent of its size. Your server probably also compresses files with gzip or Brotli, and that already shrinks plain text a lot. Even so, minifying first still saves extra bytes, and the browser has less CSS to parse once the file arrives. That's why the Size Savings panel shows the gzipped size too: it gives you a realistic idea of what visitors actually download.

Keep your original, readable CSS for editing, and use the minified copy on your live site. If you use a build tool, it can do this automatically. For small sites, WordPress custom CSS boxes and quick fixes, this page is the fastest route.

One small habit makes life easier: name the minified file with .min.css at the end, for example style.min.css. That way you always know which file to edit and which one to upload, and you never accidentally overwrite your readable source.