CSS Minifier

Current status

Browser-only {{ minifyProfileLabel }} {{ browserTargetLabel }} {{ formatBytes(metrics.inputBytes) }} input {{ formatBytes(metrics.outputBytes) }} output {{ parserBadgeLabel }}

Minify profile:

Choose how much rewriting the browser-local minifier may apply.

Browser target:

Select the compatibility target before reviewing warnings and minified output.

CSS source:

Paste one stylesheet, or browse/drop a CSS or TXT file. Output updates automatically.

Comment handling:

Choose whether protected comments survive the minified output.

URL handling:

Control whether simple url() wrappers are normalized during minification.

Source map handoff:

Use only when the downloaded .min.css should point to a separate .map handoff.

Parser warning profile:

Choose how much compatibility and handoff caution appears in warnings and audit rows.

{{ minifiedCss || 'No CSS output yet.' }}

Metric	Value	Detail	Copy
{{ row.metric }}	{{ row.value }}	{{ row.detail }}

Check	Status	Detail	Copy
{{ row.check }}	{{ row.status }}	{{ row.detail }}

Embed:

Customize

Include current inputs

Size

Advanced

Width

Height

Aspect ratio

Max height

Collapsible embed

Allow fullscreen

Referrer policy

Sandbox tokens

CSS is written for people before it is sent to browsers. Authors use spacing, comments, section breaks, and long values to make selectors and declarations easier to review. Browsers do not need most of that authoring shape. They need valid tokens in the same order, with strings, URLs, escape sequences, at-rules, and value boundaries preserved.

Minification reduces the raw stylesheet text before the file is published or handed to a build step. It can remove ordinary comments, collapse whitespace, shorten safe values, and compact simple syntax. The result should describe the same rules with fewer bytes, not a different stylesheet with a changed cascade.

The risk is hidden in small characters. Removing the wrong space can join two identifier-like tokens. Shortening a color can be fine for a modern target and questionable for an older one. Dropping a protected comment can remove license text. Adding a source-map reference without shipping the map can leave developer tools pointing to a missing file.

CSS minification decisions and review risks
CSS part	Common reduction	Review risk
Comments	Remove ordinary notes that do not need to ship.	Protected license or attribution comments may still need to remain.
Whitespace	Drop indentation and spaces around punctuation.	A needed separator can disappear between values, names, or math operators.
Values	Shorten zero units and repeated color pairs when the meaning stays the same.	Browser target choices can affect whether newer shorthand is acceptable.
At-rules	Compact the local text without changing order.	`@import` can pull in CSS that was not part of the local pass.

Minification should not be treated as a visual test or a cleanup pass. It does not remove unused selectors, fix specificity, add missing fallbacks, rebase asset URLs, or prove that the page still renders correctly. It also does not replace transport compression such as gzip or Brotli, which can reduce the transferred bytes again after the source text has already been compacted.

A good CSS handoff keeps the syntax valid, makes byte savings measurable, and leaves enough warnings for maintainers to catch parser, compatibility, source-map, and release risks before the minified text is used.

How to Use This Tool:

Paste stylesheet text or load one local CSS/TXT file, choose how much rewriting is allowed, then review the compact CSS with the metrics and audit checks.

Choose Minify profile. Whitespace only keeps the rewrite narrow, Safe production minify adds conservative value cleanup, and Aggressive cleanup also removes earlier duplicate declarations and merges adjacent duplicate selectors.
Set Browser target. Modern evergreen browsers can allow newer shorthand such as supported hex-alpha colors. Legacy-safe browsers keeps older-readable color forms and raises stricter compatibility warnings.
Paste text into CSS source, drop text, or use Browse CSS for one local CSS/TXT file up to 2 MB. If the file is too large or the type is wrong, the source status reports the problem.
Choose Comment handling. Preserve /*! ... */ comments when license or attribution text must ship with the minified stylesheet.
Open Advanced for release-specific choices. URL handling can preserve or normalize simple url() values, Source map handoff can append an external map comment, and Parser warning profile can switch from standard to strict review.
Read Compressed CSS first, then compare Compression Metrics values such as Input size, Output size, Bytes saved, Comments removed, and Longest output line.
Check Minifier Audit before copying or downloading. Resolve parser review, unbalanced braces, unclosed strings or comments, @import warnings, source-map reminders, and strict-profile warnings unless the release process intentionally accepts them.

Interpreting Results:

Compressed CSS is the handoff text. Compression Metrics measures the current input against the compact output, while Minifier Audit shows parser and release checks. Bytes saved can be positive when the output is smaller, and Already compact means the selected profile did not reduce the current source further.

A parser pass is not visual proof. The current browser can accept the compact CSS while the actual page still needs testing for cascade order, imported files, relative asset paths, legacy fallback behavior, and build placement.

Browser parser: Passed means the compact CSS parsed into rules in the browser used for the check.
Brace structure: Review means opening and closing braces do not balance or close in the wrong order.
At-rule coverage: Review means at least one @import remains, so imported CSS needs its own check.
Modern CSS cues: Detected flags custom properties, CSS math functions, or alpha hex colors; it is not a compatibility guarantee.
Source Map JSON appears only when an external map handoff is selected, and the map file must be published with the minified CSS for the reference to help debuggers.

Technical Details:

CSS minification works because the parser reads tokens rather than authoring layout. Spaces and line breaks can often disappear around braces, commas, colons, semicolons, and combinators. Separators still matter when adjacent names, values, signs, or function content would otherwise run together.

Strings, comments, and URLs need special handling because ordinary punctuation can be part of their value. A slash in a quoted URL is not a comment. A parenthesis inside a URL can change whether quotes are safe to remove. A comment that begins with /*! often carries license or attribution text that should survive a production handoff.

Formula Core:

The displayed reduction percentage compares UTF-8 input bytes with output bytes and does not show a negative percentage.

Reduction percent = \max (0, \frac{Input bytes - Output bytes}{Input bytes} \times 100)

If a 4,000 byte stylesheet becomes 2,900 bytes, Bytes saved is 1,100 B and the reduction is 27.5%. If preserved comments or a source-map comment make the output larger, the saved-byte count can be zero or negative internally, but the displayed reduction remains 0%.

Transformation Core:

CSS minification transformation stages
Stage	What changes	What stays protected
Comment handling	Ordinary block comments are removed, kept compact, or preserved only when they begin with `/*!`.	Quoted text is not treated as a comment, even when it contains slash or asterisk characters.
Whitespace compaction	Indentation, blank lines, and redundant spaces collapse around braces, colons, semicolons, commas, and combinators.	Separators remain when adjacent tokens, function boundaries, or plus and minus expressions need them.
Safe value cleanup	Zero units can become `0`, repeated hex color pairs can shorten, and supported RGB colors can become hex colors.	Out-of-range color channels and unsupported value patterns are left alone.
URL handling	Simple quoted `url()` values can lose their quotes when normalization is selected.	URLs containing whitespace, parentheses, quotes, or backslashes keep their original wrapping.
Aggressive cleanup	Earlier duplicate declarations inside simple rule blocks can be removed, and adjacent duplicate selectors can be joined.	At-rules and complex nested structures are not broadly refactored.

Audit Core:

CSS minifier audit checks and review triggers
Audit check	Review trigger	Why it matters
Browser parser	The compact CSS cannot be parsed, produces no parsed rules, or the parser is unavailable.	Byte savings alone cannot prove that the compact text is usable CSS.
Brace structure	Opening and closing brace counts do not balance, or a closing brace appears before a matching opener.	Later rules may be swallowed into the wrong block or ignored during parser recovery.
String/comment closure	A quoted string or block comment appears unclosed.	Minified text hides line breaks, so syntax breaks become harder to spot after compaction.
Browser target	Legacy-safe review sees custom properties, CSS math functions, or alpha hex colors.	Older browser support may require fallback CSS outside the minified output.
Source map handoff	An external source-map comment is appended without the matching map file being published.	Developer tools can point to a missing map and make debugging harder.

Worked Transformation Path:

A rule such as .btn { margin: 0px 8px; color: #336699; } can become .btn{margin:0 8px;color:#369} under safe minification. The zero unit is removed, repeated hex pairs are shortened, and the space between 0 and 8px remains because the two values must stay separate.

A math value such as calc(100% - 2rem) keeps the separator around the minus sign. Removing it would make the expression harder for parsers to read consistently.

Limitations and Privacy:

Minification runs in the browser session, and local CSS/TXT files are read as local text. That avoids a server-side minification step for ordinary use, but release CSS should still be handled with normal care.

Do not paste proprietary stylesheet text on an untrusted machine or into a shared browser session.
If CSS is carried in a shared or bookmarked page URL, treat that URL as containing source text.
Run a visual regression check, build check, or real page load before publishing important CSS.
Review relative asset paths after URL normalization because minification does not rebase images, fonts, or other referenced files.

Worked Examples:

Production token stylesheet. A 6 KB stylesheet with :root custom properties, calc(100% - 2rem), and one /*! Project license */ notice is run with Safe production minify and protected comments. Comments removed counts ordinary comments, the protected notice remains, and Modern CSS cues flags custom properties and math functions for compatibility review.

Small rule with value cleanup. The input .btn { margin: 0px 8px; color: #336699; } produces compact CSS like .btn{margin:0 8px;color:#369}. Value optimizations increases because 0px and #336699 were shortened, while Browser parser should read as Passed for a supported parser.

External source-map handoff. Selecting Append external source map comment adds a source-map comment to Compressed CSS and opens Source Map JSON. The CSS and styles.min.css.map file need to be published together; otherwise the map reference is a broken debugging aid.

Broken source before release. The input .card { color: #111827; may still produce compact text, but Brace structure reports Review. Add the missing closing brace, rerun the minifier, and wait for balanced audit results before copying the compact CSS.

FAQ:

Does a parser pass mean the page will look the same?

No. Browser parser: Passed means the compact CSS parsed into rules in the current browser. Test the minified file in the actual page or build path before publishing.

Why are some spaces still present?

Some spaces keep CSS valid. Values such as 0 8px, expressions such as calc(100% - 2rem), and adjacent identifier-like tokens can need a real separator.

What should I do when the audit says review?

Read the matching Minifier Audit row first. Common fixes are closing a string, adding a missing brace, removing an unterminated block comment, checking an @import, or publishing the referenced source-map file.

Are pasted files uploaded for minification?

No server-side minification step is used. CSS/TXT files are read in the browser session, but avoid shared URLs or untrusted browsers when the stylesheet text is sensitive.

When should I use aggressive cleanup?

Use Aggressive cleanup only when removing earlier duplicate declarations and merging adjacent duplicate selectors is acceptable for the stylesheet. Use Whitespace only or Safe production minify when preserving authored rule shape matters more than extra savings.

Glossary:

CSS minification: Reducing stylesheet text while preserving the CSS that browsers need to parse.
Token: A meaningful piece of CSS syntax, such as a selector, property name, value, string, or punctuation mark.
Protected comment: A block comment beginning with /*!, often used for license or attribution text.
At-rule: A CSS statement beginning with @, such as @media or @import.
Custom property: A CSS variable-style property whose name begins with --.
Source map: A debugging file that helps developer tools relate minified CSS back to the original source text.
Browser parser: The browser's CSS parser used as a local syntax check for the compact output when available.

References:

CSS Syntax Module Level 3, W3C.
@import CSS at-rule, MDN.
Comments - CSS, MDN, November 7, 2025.
CSSStyleSheet: replaceSync() method, MDN.