Developer Tools

CSS Minifier

Compress stylesheets by removing comments, collapsing whitespace, shortening hex colours and trimming redundant units.

Free to use No registration Mobile friendly Unlimited usage

What is the CSS Minifier?

Stylesheets compress well. They are repetitive by nature, full of indentation, and usually written with generous spacing to keep rules readable. Removing all of that typically cuts a hand-written stylesheet by 20% to 30%.

That matters because CSS is render-blocking. A browser will not paint anything until it has the stylesheet, so every kilobyte sits directly in front of your first contentful paint. HTML and JavaScript can be deferred. CSS generally cannot.

What the minifier does

Comments are removed. As with HTML, these often say more than intended - the name of the theme you started from, a note about a client, a block of rules commented out during a redesign and never deleted.

Whitespace is collapsed everywhere it is not needed. The spaces around braces, colons, semicolons and commas all go, along with the indentation and the blank lines between rules. This accounts for the bulk of the saving.

Hex colours are shortened where the shorthand is exact. #ffffff becomes #fff, #aabbcc becomes #abc. Only colours where each pair repeats can be shortened, so #1e93e8 stays as it is. Three bytes saved per colour is small, but a stylesheet with a design system in it can contain hundreds of colour declarations.

Zero values lose their units. margin: 0px becomes margin: 0, which is equivalent in every browser - zero is zero regardless of unit.

The final semicolon in each rule block is optional in CSS and can be dropped. The option is off by default because some older build tools and CSS-in-JS parsers are unhappy with the result, and the saving is a byte per rule.

What it will not do

This minifier does not restructure your CSS. It will not merge two rules with identical selectors, remove properties overridden later in the file, or delete rules whose selectors match nothing on your site.

That restraint is deliberate. Those transformations require understanding cascade and specificity, and getting them wrong changes how the page looks. A minifier that only removes characters is one you can run without re-testing every page. If you want the aggressive optimisations, use a dedicated build tool and budget time for regression testing.

Order still matters

One thing to keep in mind: CSS depends on source order. When two rules have equal specificity, the later one wins. Minification preserves that order exactly, so behaviour is unchanged. But if you are concatenating several stylesheets before minifying, concatenate them in the same order the browser would have loaded them - reordering files is how a minification step ends up blamed for a visual change it did not cause.

Benefits of using the CSS Minifier

Targets render-blocking weight

CSS blocks the first paint, so bytes removed here affect perceived load speed more directly than HTML or script savings.

Safe transformations only

No rule merging or dead-code removal, so the cascade is untouched and you do not need to re-test every page.

Shortens colours accurately

Six-digit hex values collapse to three only where the shorthand is exactly equivalent, never approximately.

Optional trailing semicolons

Off by default, because some older build chains object to the result and the saving is a single byte per rule.

How to use the tool

Step 1

Paste your stylesheet

Step 2

Keep remove comments and shorten colours on for a standard minify

Step 3

Enable trailing semicolon removal only if your build chain handles it

Step 4

Press Minify CSS and check the reduction

Step 5

Upload the result and hard-refresh to confirm nothing shifted

Popular use cases

  • Theme stylesheets before upload
  • Critical CSS for inlining
  • Email template styles
  • WordPress child theme files
  • Reducing render-blocking weight
  • Landing page stylesheets
  • Cleaning up inherited CSS
  • Measuring stylesheet bloat

Frequently asked questions

It should not. Only characters with no meaning are removed - whitespace, comments, redundant units and equivalent colour shorthands. Source order and specificity are untouched, so the cascade resolves exactly as before.

For browsers, entirely - the specification makes it optional. The risk is in tooling: some older preprocessors and CSS-in-JS parsers object. It is off by default for that reason, and the saving is one byte per rule.

Ready to start using TU Web Tools?

Free, browser based utilities for developers, SEO professionals, students and businesses.

Free to use  •  Mobile friendly  •  No installation required