CSS Minifier

Q: Why did #ff0000 become red?

`red` is shorter and means exactly the same colour.

Minify CSS with CSSO: removes whitespace and comments, shortens colors and values and merges rules safely. Shows the bytes saved. Free, runs in your browser.

CSS input

Output

Runs entirely in your browser. Your data is never uploaded.

Related Tools

View All

JSON Formatter JSON Validator XML Formatter camelCase snake_case kebab-case PascalCase CONSTANT_CASE

What is CSS Minifier?

The CSS Minifier compresses stylesheets with CSSO, a structural optimizer. Besides removing whitespace and comments it shortens values (#ff0000 → red, 0px → 0), merges duplicate rules and removes redundant declarations where this cannot change the result.

How to use CSS Minifier

Paste your CSS into the input box.
Click Minify (the output also updates while you type).
Check the size line for the saving.
Copy or download the minified CSS.

Example

Input

a { color: #ff0000; margin: 0px 0px; } /* c */

Output

a{color:red;margin:0}

When to use CSS Minifier

Use it for production builds of small sites, inline <style> blocks or CSS stored in a CMS. If your build already uses a bundler with cssnano/lightningcss, keep using that. Keep license comments manually if your licence requires them.

How CSS Minifier works

First a quick scan checks braces, strings and comments and reports unbalanced blocks with their position. The CSS is then passed to csso.minify with restructuring enabled: CSSO parses it into an AST (css-tree), applies safe value compressions and rule merging, and prints the result without whitespace. Comments are removed, including /*! … */ license comments.