CSS Minifier

What Does CSS Minification Change in a Real Stylesheet?

Paste CSS, choose your comment policy in Settings, and click Minify CSS. With the default settings, the example below shrinks from 71 to 47 UTF-8 bytes: 24 bytes saved, displayed as 34%. The ordinary comment disappears, indentation collapses, and the calc() expression stays unchanged.

The input has two spaces before each declaration, two spaces after the first colon, and a final newline after the closing brace. Those details matter when reproducing the byte count. Paste only the stylesheet text, without a Markdown code fence.

/* Card styles */
.card {
  color:  red;
  width: calc(100% - 2rem);
}

The exact output is:

.card { color: red; width: calc(100% - 2rem); }

The spaces around braces and after colons remain. The minifier does not rewrite red, remove the final semicolon, or evaluate the width expression. This makes the result easy to compare with the source while showing the difference between conservative compaction and deeper CSS optimization.

How Do You Minify a Local CSS File?

Paste your stylesheet into CSS Input or choose Open CSS file. Opening a file reads its text into the editor; it does not upload the stylesheet. The file picker accepts CSS, and the reader checks for a .css filename extension without case sensitivity. It reads one selected file, rather than combining several stylesheets.

Review or edit the text before processing. Choose the comment policy and select Minify CSS, or press Ctrl+Enter or Command+Enter inside the input. The Minified CSS field is read-only: make corrections in the input and run again. If Paste cannot access your clipboard, paste directly into CSS Input. Sample loads a demonstration with a license notice, a descendant selector, and literal comment-like text inside a string.

Use Copy for text or Download CSS for a file. Opening theme.css produces theme.min.css; an existing theme.min.css keeps that name. Pasted text uses styles.min.css. The download contains UTF-8 CSS text. These controls wrap across narrow layouts, so the same workflow is available on smaller screens.

Why Does This Minifier Keep Some Spaces?

CSS whitespace has meaning. The selector .nav :hover targets hovered descendants, whereas .nav:hover targets the navigation element itself. Removing every space near punctuation would change that selector. With Compact whitespace checked, runs of CSS spaces, tabs, line breaks, carriage returns, and form feeds collapse to one space outside protected regions. Leading and trailing formatting whitespace is removed.

Strings, escape sequences, and complete parenthesized bodies remain intact. That includes nested functions, math expressions, quoted text, and data URLs. A multiline function can therefore remain multiline in the output. Spaces inside content: "a b" are preserved, as are spaces in calc(100% - 2rem). Nonbreaking spaces are not treated as ordinary CSS formatting whitespace.

The CSS Syntax specification describes tokenization and the need for separators between certain adjacent tokens. This tool keeps existing token spacing instead of seeking the shortest possible serialization. Uncheck Compact whitespace when you want comment processing while retaining the source's whitespace formatting. It does not turn compact CSS back into indented CSS.

How Should You Choose a Comment Policy?

The Comments selector offers three policies. They apply to actual block comments outside parenthesized bodies, not text resembling a comment inside a quoted string.

Comment handling outside function bodies

Option	Result
Keep license comments (/*! */)	Default: retains comments beginning with /*!; removes ordinary comment text.
Keep all comments	Retains every comment, including its internal formatting.
Remove comments	Removes comment text, including license notices.

The license policy recognizes the opening marker; it does not analyze legal text. An ordinary comment mentioning a license is still removed unless it begins with /*!. Choose which notices to retain according to your project's requirements.

Removal also respects token boundaries. For example, .a/* note */.b{} becomes .a/**/.b{}, preserving a separator without inserting a descendant-selector space. An empty comment in the result is therefore intentional. Function bodies remain opaque: a comment inside var(--gap, /* fallback */ 1rem) stays under every policy.

What Do the Size Statistics Tell You?

The footer shows Original, Minified, Saved, and an integer percentage. Each size uses UTF-8 encoding, so accented text, non-Latin identifiers, and generated content count by encoded bytes rather than JavaScript string length. Saved bytes equal original minus minified bytes. The percentage is that difference divided by original bytes, multiplied by 100 and rounded to the nearest integer.

When the browser supports CompressionStream and compression succeeds, a separate Gzip count shows the compressed output size. It is not a comparison against gzipped input, a Brotli estimate, or a promise of faster loading. Actual delivery also depends on server compression and caching. Already compact CSS can show no savings.

A stylesheet containing only removable comments can produce an empty result with 100% savings; that result is still downloadable. Editing the input or changing an option clears the previous result and its statistics. Run Minify CSS again to measure the revised source rather than comparing stale output.

How Are Large Files and Processing Errors Handled?

Inputs larger than 51,200 UTF-8 bytes run in a Web Worker; inputs at or below that threshold run directly. During a worker task, Cancel lets you stop processing. There is no configured file-size cap, but reading, encoding, displaying, and retaining large strings still consume browser resources. The worker threshold is not an upload limit.

Structural checks report unclosed comments, quoted strings, parentheses, and mismatched block or attribute brackets outside protected regions. For example, a missing closing parenthesis produces an instruction to add it and try again. These checks do not constitute full CSS validation: an unknown property or invalid value can pass. Fix errors in the source before generating a replacement file.

What Should You Check Before Deploying the Output?

Keep the readable original and test your application's layout, hover states, and responsive rules with the generated CSS. Rule and declaration order, selectors, values, and trailing semicolons are retained. There is no selector merging, duplicate-rule removal, unused-CSS detection, color shortening, source-map generation, or preprocessor compilation. Compile preprocessor source to CSS before using this tool.

For stylesheet unit changes, use CSS PX to REM Converter separately. For markup compaction, use HTML Minifier. For repeatable production builds, keep your existing build pipeline; this page provides an inspectable local workflow for individual stylesheets.