CSS Minifier

Your Lighthouse report flags 340KB of render-blocking CSS. You open the file: 2000 lines of whitespace, comments from three developers, #ffffff spelled out six times per rule, trailing semicolons everywhere. A build pipeline with cssnano would handle this, but you need to ship a hotfix now and the CI pipeline takes 8 minutes. You need the minified output in 3 seconds.

Why This Minifier (Not cssnano or an Online Minifier)

Online CSS minifiers like cssminifier.com upload your code to their servers — your proprietary styles leave your machine. This tool runs entirely in your browser: paste, toggle options (shorten colors, remove zero units, merge duplicate selectors), copy. No server round-trip, no upload, no tracking. For production build pipelines, use cssnano or PostCSS. For quick one-off jobs where speed and privacy matter, use this.

What Is a CSS Minifier?

A CSS minifier reduces the file size of CSS stylesheets by removing everything that is not required for the browser to parse and apply the styles correctly:

• Whitespace: Spaces, tabs, and newline characters that exist only for human readability
• Comments: /* ... */ blocks that explain the code but are irrelevant at render time
• Redundant characters: Spaces around selectors, braces, semicolons, and colons
• Verbose values: Longhand hex colors like #ffffff that can be written as #fff, and unit suffixes on zero values like 0px that can simply be 0

The resulting CSS is functionally identical to the original — it renders exactly the same in every browser — but occupies significantly less space. For websites, smaller CSS means faster downloads and faster rendering.

How Much Can CSS Minification Save?

Savings depend on how verbosely the source is written:

Minification Options

Remove Comments

Strips all /* ... */ block comments from the stylesheet. Comments are useful during development but add bytes to production stylesheets without affecting rendering.

Preserved comments: Comments starting with /*! are kept even when this option is enabled. These “important” comments typically contain copyright notices and license information that must be distributed with the CSS — many CSS tools use this convention.

Shorten Colors

Shortens 6-digit hex colors to 3 digits where the digits repeat:

8-digit hex colors (#rrggbbaa) are also shortened to 4 digits where possible.

Remove Trailing Semicolons

Removes the last semicolon before a closing brace. In CSS, the final declaration in a rule block does not require a terminating semicolon:

/* Before */
.btn { color: red; padding: 8px; }

/* After */
.btn { color:red;padding:8px}

This saves one byte per rule block. On stylesheets with hundreds of rules, the savings add up.

Remove Zero Units

Removes the unit suffix from zero values. In CSS, 0px, 0em, 0rem, 0%, 0vh, and other zero-length values are all identical to bare 0. The unit is meaningless when the value is zero:

/* Before */
margin: 0px 0em 0rem 0%;

/* After */
margin: 0 0 0 0

Supported units: px, em, rem, ex, ch, vw, vh, vmin, vmax, fr, pt, pc, cm, mm, in, s, ms.

Note: Zero values inside calc() expressions with explicit units are preserved for clarity, as calc(0px + 10%) is semantically different from calc(0 + 10%) in strict type-checking contexts.

Merge Duplicate Selectors

When enabled, rules with identical selectors are merged into a single rule. This is common in large stylesheets where different contributors or different parts of the build process define rules for the same selector separately:

/* Before */
.container { max-width: 1200px; }
.container { padding: 0 20px; }

/* After */
.container { max-width:1200px;padding:0 20px}

When the same property appears in both rules, the later declaration wins (matching CSS cascade behavior). This option is off by default because it changes the structure of the stylesheet — though functionally equivalent, the output differs more from the original.

How Whitespace Collapsing Works

The CSS minifier collapses whitespace in code regions (outside strings and url() blocks):

1. All newlines, tabs, carriage returns, and multiple spaces are collapsed to a single space
2. Spaces around {, }, ;, and , are removed entirely
3. Spaces around : are removed (safe in declarations, pseudo-classes, and media query conditions)
4. Spaces around selector combinators > and ~ are removed
5. Spaces inside calc(), var(), and similar functions that require them for operator precedence are preserved (the + and - operators require surrounding spaces in calc())

String literals (inside '...' and "...") and url() blocks are never modified.

How to Use the CSS Minifier

1. Paste your CSS into the left input panel
2. The minifier runs automatically and displays the minified output on the right
3. The stats bar shows the original size, minified size, and percentage saved
4. Toggle options to include or exclude specific transformations
5. Click Copy to copy the minified CSS to your clipboard

All processing runs entirely in your browser — your CSS is never sent to any server.

CSS Minification and Web Performance

CSS is a render-blocking resource: the browser cannot display the page until it has downloaded and parsed all CSS in the <head>. Minification helps in several ways:

Network transfer: Smaller CSS files download faster, especially critical on first load before the browser cache is populated. Combined with gzip or Brotli compression, minified CSS can be 60–80% smaller than the original.

Parse time: Shorter stylesheets parse faster, reducing Time to First Byte (TTFB) and Largest Contentful Paint (LCP) — a Core Web Vitals metric.

Render blocking: Every kilobyte of render-blocking CSS delays the first paint. Minification directly reduces Largest Contentful Paint (LCP) time.

Minification vs PurgeCSS vs PostCSS

These tools serve related but different purposes:

For production, PurgeCSS + cssnano together provide the most aggressive size reduction. This tool handles the minification step for quick one-off tasks or when a build pipeline is not available.

Common Questions

Is my CSS sent to a server? No. All minification runs entirely in your browser. Your stylesheet is never transmitted to any server and never leaves your device.

Can I undo the minification? Minification removes comments permanently. Whitespace can be added back with a CSS formatter or beautifier. Always keep the original source before minifying.

Will minification break my styles? In almost all cases, no. The minifier only removes whitespace, comments, and performs safe value transformations. String literals and url() values are never modified. If you encounter an issue, disable individual options to isolate the cause.

Why is my minified output larger than expected? If your CSS was already concise or generated by a build tool, there may be little whitespace to remove. The biggest gains come from developer-authored CSS with extensive formatting and comments.

What is the difference between #fff and #ffffff? They are identical. Both represent pure white (255, 255, 255). The 3-digit form is simply a shorthand where each digit represents both the high and low nibble of the corresponding color channel. The browser expands #abc to #aabbcc internally.

What about vendor prefixes? This tool preserves all vendor prefixes (-webkit-, -moz-, -ms-, -o-). It does not add or remove them. For automatic vendor prefix management, use Autoprefixer in your PostCSS build pipeline.