CSS minifier

Shrink your stylesheets

CSS blocks rendering: the browser won't paint the page until it has downloaded and parsed the stylesheets in the <head>. That makes CSS size directly important for how fast your page appears. The CSS minifier removes comments, whitespace, line breaks and other characters that browsers don't need, and shows the character count before and after.

The styles keep working exactly the same; the file just gets smaller. It's perfect for custom CSS in WordPress, Shopify or AltumCode themes, for small projects without a build tool, and for inline critical CSS.

Keep the readable original for future edits, and deploy the minified copy.

How to use the css minifier

1. Paste your CSS.
2. Submit to minify.
3. Compare the before and after character counts.
4. Copy the minified CSS into your site or file.

Examples

Button styles

Input:

/* Buttons */
.btn {
  color: #ffffff;
  margin: 0px 0px 10px 0px;
  background-color: #8997BB;
}

.btn:hover {
  opacity: 0.80;
}

Output:

.btn{color:#fff;margin:0 0 10px;background-color:#8997bb}.btn:hover{opacity:.8}

The comment and spaces are gone, #ffffff is shortened to #fff, 0px becomes 0, the repeated margin value is collapsed and 0.80 becomes .8.

Common uses

• Minifying custom CSS added through a theme or CMS settings panel.
• Shrinking stylesheets for small sites and landing pages.
• Preparing inline critical CSS for faster first paint.
• Compressing CSS in HTML email templates.
• Shrinking a stylesheet for a site without a build process, like a small static site or landing page.
• Preparing critical CSS to inline in the <head> of a page.
• Cutting the size of custom CSS pasted into a CMS or website builder.

Tips and things to know

• Remove unused rules first; deleting CSS saves more than minifying it.
• Keep comments you need (like licence notices) in the source file and check whether they're preserved.
• Test the page after deploying, especially if your CSS has unusual hacks.
• Minify your HTML and scripts too with the HTML minifier and JS minifier. Check color values with the color converter.

Edge cases and limitations

• The output is one long line, which makes errors hard to find. Keep your readable source file and minify a copy.
• Comments are removed, including license comments. Add back any credits you're required to keep.
• Invalid CSS may be dropped or changed. If something looks off after minifying, check the original for a missing brace or semicolon.

Frequently asked questions

What does a CSS minifier do?

It removes unneeded characters from CSS, such as whitespace and comments, without changing how the styles work.

Is minified CSS faster?

Yes, smaller files download and parse faster, which helps the page render sooner.

Can I un-minify CSS?

You can reformat it with a beautifier, but removed comments can't be recovered. Keep your original file.

Should I minify CSS if I use gzip or Brotli?

Yes. Compression and minification work together for the smallest transfer size.

Does minifying change how my site looks?

It shouldn't. Only characters that browsers ignore are removed, and values are shortened to equivalent forms like #fff.

Related tools

• HTML minifier: Minify your HTML by removing all the unnecessary characters.
• JS minifier: Minify your JS by removing all the unnecessary characters.
• Color converter: Convert your color to multiple other formats.
• Text size calculator: Get the size of a text in bytes (B), Kilobytes (KB) or Megabytes (MB).
• HTTP/2 Checker: Check whether a website is using the new HTTP/2 protocol or not.