Smaller CSS, with the transformation kept visible

The CSS Minifier converts a readable stylesheet into a compact representation for transfer or embedding. Input and minified output appear side by side, making this tool well suited to checking a small asset, preparing an isolated code sample, or learning which bytes a minification pass can remove. The result changes whenever the source or Aggressive Minify setting changes, and the Copy control places that exact result on the clipboard.

Minification is different from compression. This tool removes characters and simplifies selected CSS values; gzip or Brotli subsequently encodes repeated byte patterns during delivery. A production site commonly uses both: a minified .css asset is stored or built first, then the web server sends a compressed response when the client supports it.

What the standard pass removes

The baseline pass strips every block comment matching /* ... */, collapses runs of whitespace to one space, and removes whitespace surrounding {, }, :, ;, and commas. It also removes a final semicolon immediately before a closing brace. Leading and trailing whitespace disappears.

Given this source:

/* Navigation layout */
.nav, .footer-nav {
  display: flex;
  gap: 1rem;
  color: #334455;
}

the standard CSS minifier produces a shape like:

.nav,.footer-nav{display:flex;gap:1rem;color:#334455}

Those edits ordinarily preserve how CSS is interpreted while reducing formatting overhead. Comments are an important exception operationally: copyright notices, license text, build annotations, source map directives, and maintenance notes are all removed without distinguishing their purpose. Preserve required notices outside the asset or use a build tool configured to retain them.

The aggressive pass, operation by operation

Aggressive mode is enabled by default and layers value-level rewrites on top of whitespace minification.

Hex colors are lowercased, so #AABBCC becomes #aabbcc.
Six-digit hex colors are shortened when each pair repeats, turning #aabbcc into #abc.
Units are removed from zero lengths for units such as px, em, rem, viewport units, physical units, ex, and ch. Percent units are deliberately not included.
Leading zeroes are removed from decimal fractions in recognized contexts, so 0.5rem can become .5rem.
Repeated semicolons collapse into one semicolon.
Matching single or double quotes around a url() value are stripped.
Spacing and casing around !important are normalized to !important.
Spaces around the child combinator are removed, producing .menu>li.

For example:

.avatar > img {
  border: 0px solid #AABBCC;
  opacity: 0.50;
  background-image: url("/images/profile.png");;
}

becomes approximately:

.avatar>img{border:0 solid #abc;opacity:.50;background-image:url(/images/profile.png)}

The tool does not combine longhand properties, deduplicate declarations, calculate equivalent color functions, rename custom properties, or remove unused selectors. Those transformations require broader parsing or knowledge of the documents that consume the stylesheet.

A deployment-minded workflow

Start with source-controlled, readable CSS rather than treating the minified result as the only copy. Paste the relevant stylesheet into the input panel and first inspect output with aggressive mode disabled. This establishes what comment and whitespace removal alone does. Enable the aggressive option, compare the second result, and review every value rewrite that matters to your browser support policy.

Next, validate the output with the project’s CSS parser or build command. Test representative pages at target viewport sizes and exercise hover, focus, active, reduced-motion, print, and dark-mode states. CSS can parse successfully yet still fail visually because an asset URL changed meaning or a declaration was altered in an unsupported edge case.

If the result is for production, automate equivalent minification in the build system instead of repeatedly pasting files by hand. Automation gives reproducible output, versioned configuration, preserved licensing rules, source map support, and a clear connection between source and deployed assets. This browser tool remains useful for experiments, quick comparisons, and diagnosing a minified fragment from an external system.

Measure the final network response rather than only counting characters in the output pane. Developer tools can show encoded and decoded transfer sizes. A tiny raw-byte saving may vanish under Brotli, while removing a large comment may materially reduce both forms. Cache headers and asset fingerprinting often have a larger repeat-visit impact than an extra handful of whitespace bytes.

Cases that need extra caution

This minifier uses regular-expression transformations, not a complete CSS syntax tree. CSS strings and functions can legally contain characters that resemble comments or punctuation. Text such as "/* not a comment */" can be removed even when it appears inside a quoted value. Whitespace may be significant inside custom property token streams, and collapsing it blindly can alter how a later var() substitution parses.

Quoted URLs are unquoted in aggressive mode without determining whether the inner value is safe as an unquoted URL token. Spaces, parentheses, quotes, control characters, or escapes in an asset location can make quote removal unsafe. Data URLs combine several forms of punctuation and should always be checked. Keeping aggressive mode off is the better default when processing unfamiliar third-party CSS or values generated by another language.

The hex pattern recognizes three to six hexadecimal digits at a word boundary. Modern eight-digit alpha hex colors are not shortened by this pass. Zero-unit removal covers a specified list rather than every possible unit, and does not include percentages. These are deliberate implementation boundaries, not an indication that omitted forms are invalid.

Comment stripping does not preserve /*! license */ conventions. The tool also does not understand source maps, CSS Modules exports, Sass interpolation, Less syntax, or PostCSS plugin extensions. Feed compiled CSS to a CSS minifier; feed preprocessor source to tooling designed for that grammar.

Reading compact output during an incident

Minified CSS is useful for delivery but poor for diagnosis. If a deployment serves the wrong styles, save the exact network response before modifying it. Compare its hash and response headers against the expected artifact, then beautify a copy for inspection. Do not re-minify a beautified copy and assume it will byte-match the original: different minifiers choose different safe rewrites and ordering strategies.

When a selector appears missing, remember that this utility never performs dead-code elimination. Its absence points to an earlier build step, conditional import, cache, or deployment issue. When an image stops loading only after aggressive minification, inspect quote removal in url(). When a custom property produces a different computed value, compare whitespace and punctuation in its token sequence.

Troubleshooting checklist

Output is empty after pasting CSS. Check whether the input consisted only of whitespace or comments. Standard processing removes both.

A required banner disappeared. All block comments are stripped. Restore the notice from source and use a production minifier with an explicit comment-retention policy.

An asset URL no longer parses. Disable Aggressive Minify. If standard mode works, keep the URL quoted or process the stylesheet with a parser-aware optimizer.

The checkbox seems unrelated to whitespace. Both modes already remove comments and formatting whitespace. Aggressive mode controls the additional color, zero, decimal, URL, semicolon, !important, and combinator rewrites.

The byte reduction is less than expected. The stylesheet may already be compact, or most bytes may be property names and values that this tool intentionally leaves alone. Check encoded transfer size and investigate unused CSS separately.

Questions about the CSS Minifier

Does minifying CSS make a page render faster?

It can reduce the number of bytes downloaded and parsed, particularly for large uncached stylesheets. The practical gain depends on response compression, latency, caching, and how much removable text the source contains. Minification does not fix render-blocking architecture or excessive unused rules.

Is aggressive mode always safe?

No. Its rewrites are useful for conventional CSS, but quote removal and regex-based handling can be risky for unusual strings, URLs, and custom property values. Validate and visually test the result.

Are comments retained?

No block comments are retained, including comments beginning with /*!. Handle legal notices and attribution before using the output.

Does it provide gzip or Brotli output?

No. It returns plain minified CSS text. Configure content encoding at the server, CDN, or build stage.

Can it remove unused CSS?

No. Determining whether a selector is unused requires knowledge of templates, runtime class names, states, and often JavaScript behavior. Use a dedicated coverage or purge workflow with an appropriate safelist.

Should minified CSS be committed?

Commit generated assets only when the repository’s release process expects them. In most application projects, keep readable source and generate minified files reproducibly during build or release.

CSS Minifier