CSS Minifier

1. Paste a stylesheet, drop a .css file, or choose Load example. Syntax errors are reported with line and column before anything is minified.
2. Keep Restructure rules on for the smallest output, or turn it off when rule order and grouping must stay exactly as written.
3. Copy the result with ⌥/Alt C or download it with ⌘/Ctrl S. The Beautify Next action opens it in the CSS Formatter.

#Duplicate colors and zero margins

Two rules share a color, and the margin repeats zero four times. With restructuring, the shared declaration is merged into one grouped rule.

.a {
  color: #ff0000;
  margin: 0px 0px 0px 0px;
}

.b {
  color: #ff0000;
}

Result:

.a{margin:0}.a,.b{color:red}

#The same stylesheet without restructuring

With Restructure rules off, each rule stays where it was. Colors are still shortened, but the margin shorthand and the duplicate color are not merged.

.a {
  color: #ff0000;
  margin: 0px 0px 0px 0px;
}

.b {
  color: #ff0000;
}

Result:

.a{color:red;margin:0 0 0 0}.b{color:red}

#License comment, overridden padding and value shortening

The /*! license banner is kept and the ordinary comment removed. The second .btn padding overrides the first, so only the winning value survives; bold becomes 700 and the rgb() color becomes hex.

/*! theme v2 | MIT */
/* layout */
.btn {
  padding: 8px 12px;
  font-weight: bold;
  background-color: rgb(79, 70, 229);
}
.btn { padding: 8px 16px; }
.link { font-weight: bold; }

Result:

/*! theme v2 | MIT */
.btn{background-color:#4f46e5;padding:8px 16px}.btn,.link{font-weight:700}

• Restructure rules — lets CSSO merge rules with identical selectors or declarations, drop declarations that are overridden later, and shorten shorthand values; turn it off to keep the original rule order and grouping.
• Keep /*! */ comments — preserves comments that start with /*!, the convention for license and copyright banners; with it off, every comment is removed.

#"Selector is expected"

The parser found something that cannot start a rule — often a stray } after a closing brace, or Sass syntax such as $variable: 1px. Minification needs plain CSS; compile SCSS first, or format it in the SCSS Formatter.

#"Colon is expected"

A declaration or rule is not closed, so the next rule is read as part of it: in a{color:red;b{c:d} the selector b is read as a property that lacks its colon. Check the line before the reported position for a missing } or ;. Formatting the file in the CSS Formatter usually makes the unclosed block easy to spot.

#The layout changed after minifying with restructuring

Restructuring assumes the stylesheet is used as a whole. If you rely on the order of rules across separate files, or on CSS hacks that duplicate a property for older browsers, turn off Restructure rules for a whitespace-and-values-only result.

#The license comment disappeared

Only comments starting with /*! are kept, and only when Keep /*! */ comments is on. Change /* License */ to /*! License */ to mark it as one to preserve.

#The output is the same size as the input

The stylesheet was already minified, or has nothing CSSO can shorten. A 0% saving is normal for build output that has been through a minifier before.

#Is minified CSS safe to use in production?

Yes. CSSO only applies transformations that preserve how selectors match and which declaration wins. Restructuring merges rules when that cannot change the cascade, and drops a declaration only when a later one for the same selector overrides it. If you use unusual hacks, such as duplicate properties for legacy browsers, turn restructuring off and compare the result in your target browsers.

#What does "restructure" actually do?

It looks across the whole stylesheet for rules it can combine. Identical declarations on different selectors are grouped (.a,.b{color:red}), rules with the same selector are merged, overridden declarations are removed, and shorthand values like 0 0 0 0 become 0. This is where most of the saving beyond whitespace removal comes from.

#Does the minifier handle media queries and custom properties?

Yes. Media queries, @supports, keyframes and custom properties are preserved and minified. Whitespace inside @media conditions is reduced, and the values of --custom-properties are only trimmed, because they can hold arbitrary tokens. CSSO may move @keyframes blocks to the start of the output; keyframes are global, so this does not change how they apply.

#Can I get readable CSS back later?

You can make it readable again with the Beautify Next action or the CSS Formatter: indentation and line breaks come back. Removed comments do not, and merged rules stay merged, so keep your source file under version control and treat the minified output as a build artifact.

#Is my CSS uploaded to minify it?

No. CSSO runs in your browser, inside an isolated editor frame that blocks network requests, so stylesheets are never sent to or stored on a server. Files referenced by @import or url() are not fetched. Settings are remembered on this device; input is stored only if you turn on "Remember my last input".

#Should I minify CSS and JavaScript the same way?

Both remove what browsers do not need, but the tools differ. CSS minification is mostly safe structural rewriting. JavaScript minification also renames variables and removes unreachable code, which has more options to consider. Use the JavaScript Minifier for scripts, and browse other code tools for related tasks.

Minification and compression solve different parts of the same problem, and production sites usually use both.

Minified CSS still compresses well, and the combination is smaller than either alone. The percentage shown here is the minification saving on raw bytes, before any transfer compression.