Skip to content
ToolQivo

CSS Minifier

Compress a stylesheet without touching what it means.

SEO Tools Reviews Free · no sign-up

Quick Tool Overview

The CSS Minifier removes comments, collapses whitespace, drops the optional semicolon before each closing brace and removes empty rules. It tracks brace depth, because a colon in a declaration and a colon in a selector need opposite treatment — `a :hover` is a descendant selector and `a:hover` is not.

What it does
Minifies a stylesheet without changing what it selects
You give it
CSS, as a whole stylesheet or a fragment
You get back
Minified CSS with the size saved
Best for
Hand-written stylesheets and inline critical CSS
SEO Tools Free, unlimited use No sign-up Runs in your browser

About the CSS Minifier

Paste a stylesheet and the minifier removes comments, collapses whitespace, strips the optional semicolon before each closing brace and drops empty rules. Licence comments opening with an exclamation mark are kept, which is the convention for keeping them.

The subtlety is that the same character means different things in different places. A colon inside a declaration block separates a property from its value and the space after it is free; a colon in a selector introduces a pseudo-class, and `a :hover` is a descendant selector while `a:hover` is not. A space inside a media query condition is required. This minifier tracks brace depth so each of those is handled by its own rule rather than by one regular expression that gets it right most of the time.

Key features of the CSS Minifier

Selector-aware

Brace depth decides how a colon is treated, so pseudo-classes and descendant selectors both survive.

Strings and url() protected

Quoted values and unquoted URLs pass through with only their padding trimmed.

Media queries intact

The spaces a media condition requires are kept rather than collapsed away.

Licence comments preserved

A comment opening with an exclamation mark survives, by long-standing convention.

Empty rules removed

A selector with nothing in it is deleted rather than shipped.

How to use the CSS Minifier

  1. 1

    Paste your CSS

    A whole stylesheet or a fragment. It never leaves your browser.

  2. 2

    Read the saving

    Original and minified sizes, the percentage saved, and a gzipped estimate.

  3. 3

    Check the output

    Selectors and media queries are shown intact, so a mangled rule is visible immediately.

  4. 4

    Copy or download

    Take the minified stylesheet straight into your build or your page.

Frequently asked questions

It should not. Brace depth is tracked, so a colon in a selector and a colon in a declaration are treated differently, and `a :hover` stays a descendant selector. Combinators and media query conditions are handled by their own rules rather than by one blanket pattern.

Reviews of the CSS Minifier

What people who use the CSS Minifier think of it. Reviews come from visitors and are posted as written.

No ratings yet

Yours would be the first.

  • 5 0 reviews rated 5 stars
  • 4 0 reviews rated 4 stars
  • 3 0 reviews rated 3 stars
  • 2 0 reviews rated 2 stars
  • 1 0 reviews rated 1 star

Write a review

Used this tool? Your rating helps the next person decide.

Your rating

Plain text only — links, email addresses and HTML are not accepted. Your name and review are shown publicly; nothing else is collected. See the privacy policy.

0 reviews

Newest first

No reviews yet

Be the first to rate the CSS Minifier. It takes half a minute and no account.

Write the first review

More SEO tools