CSS Minifier
Compress your CSS code by removing whitespace, comments, and redundant rules.
What is a CSS Minifier?
A CSS Minifier is a tool that reduces the size of a stylesheet by removing characters that add weight but not meaning. It strips whitespace, comments, blank lines, and redundant syntax so the browser downloads and parses fewer bytes while the page renders exactly the same result. This tool performs all of the work in your browser using the clean-css library.
Minification removes indentation and line breaks, drops /* ... */ comments, shortens colour values such as #ffffff to #fff, removes empty rules, and drops the final semicolon in a declaration block. At higher optimization levels it can also merge adjacent rules, restructure declarations, and combine selectors that share the same properties.
Smaller CSS files load faster, consume less bandwidth, and improve performance metrics such as LCP (Largest Contentful Paint) and FCP (First Contentful Paint). Serving minified CSS together with Gzip or Brotli compression is standard practice for any production website, and the savings compound across every page view and every visitor.
The minifier offers three optimization levels. Level 0 leaves your code untouched for reference. Level 1 applies safe optimizations such as removing comments and normalizing values. Level 2 (the default) adds advanced optimizations including merging adjacent rules and restructuring, which usually produces the smallest output without changing how the page looks.
After each run the tool reports the original size, the minified size, and the percentage saved, so you can measure the impact before you paste the result into your project. Nothing is uploaded, stored, or logged, which makes the tool safe for private or proprietary stylesheets.
Key Concepts
- Minification — removing whitespace, comments, and redundant characters without changing how the CSS renders.
- Optimization level — 0 applies nothing, 1 applies safe cleanup, and 2 applies advanced optimizations.
- Remove comments — drops
/* ... */comments so documentation and license text are not shipped. - Merge adjacent rules — combines neighbouring rules that declare the same properties.
- Restructuring — reorders and merges rules to eliminate repeated declarations safely.
- Size savings — original bytes versus minified bytes, shown alongside a percentage saved.
How to Use This CSS Minifier
- Paste your CSS — Paste or type your stylesheet into the input textarea, or load the built-in example.
- Choose an optimization level — Select level 0, 1, or 2 depending on how aggressive the compression should be.
- Toggle the options — Enable or disable comment removal, adjacent-rule merging, restructuring, and semantic merging.
- Click Minify CSS — The tool compresses the stylesheet and reports the original and minified sizes.
- Copy or clear — Copy the minified output to your clipboard, then clear the editor for the next run.
Options Reference
The minifier is controlled by the optimization level plus four boolean options. The table below summarizes exactly what each control does.
| Option | Values | Effect |
|---|---|---|
| Optimization level | 0 / 1 / 2 | 0 applies nothing, 1 applies safe optimizations, and 2 applies advanced optimizations. |
| Remove comments | On / Off | Removes /* ... */ comments from the output when enabled. |
| Merge adjacent rules | On / Off | Combines neighbouring rules with identical declarations at level 2. |
| Restructure rules | On / Off | Reorders and merges rules to shrink the output at level 2. |
| Semantic merging | On / Off | Merges rules that are semantically equivalent even when not adjacent. |
| Input stats | Read-only | Live count of characters and lines in the input area. |
The three levels map to the following behaviour in clean-css. Higher levels are cumulative, so level 2 includes everything level 1 does.
| Level | Name | What it does |
|---|---|---|
| 0 | No optimization | Returns the input unchanged, useful for a reference copy. |
| 1 | Safe optimizations | Removes comments, normalizes values, and strips empty rules. |
| 2 | Advanced optimizations | Adds rule merging, restructuring, and semantic merging. |
Worked Examples
- Comment removal —
/* header */ .a { color: red; }becomes.a{color:red}. - Whitespace collapse — a multi-line
.card { padding: 1rem; margin: 0 auto; }block collapses onto a single line. - Colour shortening —
#ffffffbecomes#fffand#aabbccbecomes#abc. - Unit trimming —
margin: 0px 0embecomesmargin:0because zero is unit-independent. - Trailing semicolon — the final
;inside each declaration block is dropped safely. - Adjacent rule merge — at level 2,
.a{color:red}and.b{color:red}merge into.a,.b{color:red}.
Tips and Common Mistakes
- Keep an unminified source — always edit the readable original and regenerate the minified file after each change.
- Test after aggressive levels — level 2 restructures and merges rules, so preview the site once to confirm nothing shifted.
- Do not expect unused-CSS removal — minification shrinks what you give it but does not detect selectors that are never used.
- Enable Gzip on the server — minification and compression are complementary; together they yield the largest transfer savings.
- Watch special comments — when comment removal is on, licensing and
!important-style banners may be stripped. - Class names stay readable — the tool does not rename selectors, so your markup keeps working without changes.
Common Use Cases
Minifying CSS is a routine step in shipping a website and comes up whenever stylesheets need to travel over a network. These are the situations where the tool saves the most time.
- Production builds — produce the smallest possible stylesheet before uploading to a CDN or hosting provider.
- Email templates — trim inline and embedded CSS so messages stay under size limits and render quickly.
- Third-party widgets — ship a compact stylesheet with an embeddable component to reduce its footprint.
- Theme and plugin distribution — bundle a lean CSS file inside a downloadable package.
- Legacy cleanup — run an old hand-written stylesheet through the tool to remove accumulated comments and dead pieces.
- Performance audits — measure how many bytes a stylesheet can shed before deciding on a refactor.
Frequently Asked Questions
Does CSS minification affect my website's appearance?
No. CSS minification only removes unnecessary characters and optimizes the code structure. The rendered output in the browser remains identical. Advanced optimizations like restructuring and semantic merging are designed to be safe and preserve functionality.
Is my CSS code stored on a server?
No. All processing happens entirely in your browser using the clean-css library. Your CSS code never leaves your device.
What optimization level should I use?
Level 0 is useful if you only want basic cleanup. Level 1 applies safe optimizations like removing comments and normalizing values. Level 2 (default) applies advanced optimizations including merging adjacent rules and restructuring for maximum compression.
What is the difference between level 1 and level 2?
Level 1 performs conservative clean-up such as removing comments and empty rules. Level 2 goes further and merges adjacent rules, restructures declarations, and performs semantic merging to reduce repetition.
Will minifying break my CSS?
Standard minification preserves rendering. If you enable the most aggressive options on complex or unusual stylesheets, preview the page once to confirm the result looks correct.
Can I reverse the minified output?
No. Minification is not lossless because comments, original formatting, and unit redundancies are removed. Keep your readable source file and minify a copy for production.
Does the tool remove unused CSS?
No. It removes characters and redundant syntax, not selectors that never match. Use a dedicated unused-CSS tool if you need dead-rule detection.
Is this CSS minifier free to use?
Yes. The tool is free, has no usage limits, and requires no registration or account.