Will minifying change how my CSS renders?

It should not. Only characters that CSS ignores are removed, and strings, url() values and calc() spacing are kept. Still, load the minified file in a staging page before you ship it, especially if the source had unusual syntax.

Why are spaces kept inside calc()?

In calc() the plus and minus operators must have whitespace on both sides to be valid, so squeezing them would break the declaration. The minifier keeps spaces around operators inside parentheses for that reason.

Are license comments that begin with /*! preserved?

No. Every comment is removed, including ones marked with an exclamation point. If a library license requires the notice to stay, paste it back at the top of the minified file.

How is this different from the CSS Formatter?

It does the opposite. The formatter expands compact CSS into indented, readable rules, while this page squeezes readable CSS into as few characters as it safely can.

CSS Minify

Minify and compact CSS.

Loading…

About CSS Minify

A lot of the weight in hand-written CSS is comments and indentation. Paste a stylesheet and the compact version appears at once: comments are dropped, whitespace shrinks to the spaces CSS actually needs, and empty declarations and the final semicolon in each block disappear. Quoted strings and url() contents are copied as they are, and operators inside calc() and media queries keep their spaces, so the rules mean the same thing as before. Nothing is rewritten beyond that.

Features

Removes comments, line breaks and surplus spaces
Drops empty declarations and the last semicolon before a closing brace
Keeps the spaces around operators in calc() and media queries
Quoted strings and url() values are left as written
Updates live while you type

Limitations

Whitespace and comments only: colors are not shortened, rules are not merged, unused selectors stay and files are not combined, so this is not a bundler or an optimizer.
The CSS is not validated, so typos and braces that do not pair up pass through unchanged.
The output is copy-only, because this page has no download button.

How it works

Paste your CSS into the CSS Input panel.
Watch the Minified CSS panel fill in as you type; there is no button to press.
Select Copy Output and paste the result where you need it, or Clear All to start again.

Example input

.button {
  color: red; /* brand color */
  padding: 10px;
}

Frequently asked questions

: It should not. Only characters that CSS ignores are removed, and strings, url() values and calc() spacing are kept. Still, load the minified file in a staging page before you ship it, especially if the source had unusual syntax.
: In calc() the plus and minus operators must have whitespace on both sides to be valid, so squeezing them would break the declaration. The minifier keeps spaces around operators inside parentheses for that reason.
: No. Every comment is removed, including ones marked with an exclamation point. If a library license requires the notice to stay, paste it back at the top of the minified file.
: It does the opposite. The formatter expands compact CSS into indented, readable rules, while this page squeezes readable CSS into as few characters as it safely can.