Does minifying CSS change how the page looks?

It should not: only comments and whitespace that CSS ignores are removed. Whitespace that changes meaning stays, such as the space in a :hover, which matches any hovered element inside a link, while a:hover matches only the hovered link.

Does it shorten colors like #ffffff to #fff?

No. Colors, numbers and shorthand properties are left as written, so a { color: #ffffff; margin: 0px; } becomes a{color:#ffffff;margin:0px}. Only comments and whitespace are removed, plus the last semicolon before a }.

Why is my /*! comment still there?

Comments that start with /*! are license comments and are kept by default. Untick "Keep /*! ... */ license comments" to remove them: the example stylesheet then goes from 436 to 234 characters, 46.3% saved.

How large a stylesheet can I minify?

Up to 2,000,000 characters, about 2 MB of plain CSS. Above 200,000 the work runs in a background worker so the page keeps responding, and a new paste stops a run that is still going. A longer file gets a message with its length: minify it in parts.

What does the warning about a string that is not closed mean?

A quoted string ends at the end of its line in CSS. The minifier then keeps that line break and says: "A browser ends it at the line break and drops the declaration, so the minifier keeps that line break." Close the quote to fix the source.

CSS Minifier

Paste CSS to remove comments and unneeded whitespace while keeping descendant spaces, calc() operators and /*! */ license comments, with the characters saved. How it works

or drop a .css file here

Input CSS

Keep /*! ... */ license comments

Minified CSS

/*! Example stylesheet: this licence comment is kept */.card{display:flex;margin:0 auto;padding:16px 24px;width:calc(100% - 2rem);background:url("images/bg.png") no-repeat}.nav *,.card :not(.muted) a{color:#333333}@media (min-width:600px) and (max-width:900px){.card>p + p{content:"a  b"}}

436 characters before, 289 after: 33.7% saved.

Input up to 2,000,000 characters; above 200,000 it runs in a background worker. Your code is minified in this browser tab and is not sent to a server.

About the CSS Minifier

The CSS minifier removes comments and the whitespace CSS does not need, and keeps the spaces that change meaning: the example stylesheet it opens with goes from 436 to 289 characters, 33.7% saved. Descendant spaces such as .nav * and a :hover, the and in @media (a) and (b), the spaces around + and - in calc(), strings, url() contents and /*! */ license comments are kept.

Before and after

Input	Output
.nav * { color: red; }	.nav *{color:red}
a :hover { color: red }	a :hover{color:red}
div { width: calc(100% - 2rem); }	div{width:calc(100% - 2rem)}
@media (min-width: 600px) and (max-width: 900px) { a { color: red } }	@media (min-width:600px) and (max-width:900px){a{color:red}}
@supports not (display: grid) { a { float: left } }	@supports not (display:grid){a{float:left}}
a::after { content: "a b"; }	a::after{content:"a b"}
a { color: #ffffff; margin: 0px; }	a{color:#ffffff;margin:0px}
a { color: red !important; }	a{color:red!important}
/* note */ a { color: red; }	a{color:red}
a { margin: 1px/**/2px; }	a{margin:1px/**/2px}

The last row keeps an empty comment, because without it 1px and 2px would run together into one token.

Frequently asked questions

Does minifying CSS change how the page looks?: It should not: only comments and whitespace that CSS ignores are removed. Whitespace that changes meaning stays, such as the space in a :hover, which matches any hovered element inside a link, while a:hover matches only the hovered link.
Does it shorten colors like #ffffff to #fff?: No. Colors, numbers and shorthand properties are left as written, so a { color: #ffffff; margin: 0px; } becomes a{color:#ffffff;margin:0px}. Only comments and whitespace are removed, plus the last semicolon before a }.
Why is my /*! comment still there?: Comments that start with /*! are license comments and are kept by default. Untick "Keep /*! ... */ license comments" to remove them: the example stylesheet then goes from 436 to 234 characters, 46.3% saved.
How large a stylesheet can I minify?: Up to 2,000,000 characters, about 2 MB of plain CSS. Above 200,000 the work runs in a background worker so the page keeps responding, and a new paste stops a run that is still going. A longer file gets a message with its length: minify it in parts.
What does the warning about a string that is not closed mean?: A quoted string ends at the end of its line in CSS. The minifier then keeps that line break and says: "A browser ends it at the line break and drops the declaration, so the minifier keeps that line break." Close the quote to fix the source.

Shrinking a stylesheet for a site with no build step

Paste a stylesheet, or upload a .css file or drop one on the page, before you put it on a site that has no build step, or check how much of a hand-written file is comments and whitespace. The stats line gives the characters before and after and the share saved: the example stylesheet the tool opens with goes from 436 to 289 characters, 33.7% saved. Copy the result, or download it as a .min.css file named after the one you uploaded (styles.min.css when you pasted).

What is removed and what is kept

The share saved is (before − after) ÷ before × 100, rounded to one decimal.

Removed: comments, runs of whitespace, whitespace around { } ; ,, after a colon and just inside parentheses, and the last ; before }.

Kept, because removing it would change the meaning: the space in a descendant selector (.nav *, a :hover), and and not before a parenthesis in @media and @supports, the spaces around + and - in calc(), strings and url() contents exactly as written, and license comments that start with /*! unless you untick that box.

Example: .card > p + p { content: "a b"; } becomes .card>p + p{content:"a b"}. The spaces around > and ~ go, but the spaces around + stay even in a selector: the minifier keeps them wherever + appears, so that calc() keeps working. Colors, numbers and shorthand properties are not shortened, so #ffffff and 0px stay as written. Input is limited to 2,000,000 characters; above 200,000 the work runs in a background worker.

Related Tools

View all tools

Dev

JS Minifier

Paste JavaScript to remove comments and unneeded whitespace. Line breaks the code relies on and /*! license comments stay; variable names are not shortened.

Dev

HTML Minifier

Paste HTML to drop comments and collapse whitespace. The space between inline elements stays, pre and textarea are kept, and inline CSS and JS can be minified.

Dev

SQL Query Formatter

Format SQL for Standard SQL, PostgreSQL, MySQL, SQLite or SQL Server, with keywords kept, upper-cased or lower-cased and 2-space, 4-space or tab indents.

Dev

XML Formatter

Format or minify XML with 2 spaces, 4 spaces or tabs. Comments, CDATA, DOCTYPE, attribute values and mixed content stay as written, up to 300,000 characters.

Dev

JSON Formatter

Paste JSON to format it with 2 spaces, 4 spaces or tabs, minify it or sort its keys. A syntax error is reported with its line, column and a caret under it.

Dev

SVG Code Viewer

Paste SVG code to preview it as an image with scripts, event handlers and outside links removed, list its colors and elements, minify it or export React TSX.