Developer Formatting

CSS minifier

Input

/* card */
.card {
  padding: 12px;
  color: red;
}

What to do

Indent

Output

.card{padding:12px;color:red}

Processed in your browser · nothing is uploaded

Local · stops where safety stops

Removes comments and every unnecessary space, and drops the semicolon before each closing brace. Values and selector order are left exactly as they are.

How to use the css minifier

1 Paste your input. The result appears immediately.

2 Pick the operation you want.

3 Copy the result, or save it as a file.

The safe transformations are the boring ones, and they are most of the win: whitespace around braces, colons and commas is never significant, comments never affect rendering, and the last semicolon in a block is optional. Everything beyond that requires understanding the cascade. Merging `.a{color:red}` and `.a{padding:0}` looks obviously safe and is not, because something between them may override one of the two. This stops at the safe line, which is why its output is smaller than the input and never behaves differently.

Questions

What exactly is removed? −

Comments, unnecessary whitespace, and the semicolon before each closing brace. Nothing else.

Why not merge duplicate rules? +

Does it break CSS hacks? +

Should I minify if I use gzip? +

Is my stylesheet uploaded? +

Sources

MDN — CSS reference

Was this tool any good?

INTERNAL SIGNAL ONLY · WE USE IT TO FIND TOOLS WORTH REBUILDING