CSS Minify

What this page is for

A stylesheet written for humans is full of indentation, comments and verbose values. The browser does not need any of it. This page sends the CSS to a server-side minifier, receives a compact version and shows both character counts so you can see the difference. It is a source-to-source pass: CSS in, CSS out.

The page opens with the language set to CSS and the mode set to Minify, so the common case needs one paste and one button press. The selectors are still visible, which means you can switch to another language or to Beautify if you landed here by mistake, but the copy on this page describes the CSS minifier.

What the minifier removes

Ordinary comments are stripped, including the banner comments that designers use to separate sections. Whitespace around braces, colons, commas and semicolons is collapsed, and indentation disappears. The final semicolon in a block is dropped because the closing brace already ends the declaration list. Empty rule blocks are removed.

Strings are protected during the pass, so a value such as content: "a test" keeps its internal spacing. That matters for generated content, font names with spaces and URLs that contain unusual characters. The minifier extracts strings before it touches whitespace and restores them afterwards.

Every comment is removed, including comments that start with an exclamation mark. If you rely on a license banner or a build marker surviving minification, keep a separate copy of the original; this pass will not preserve it.

Value shortcuts you may notice

The output is not only whitespace-free. The library also rewrites values where the shorter form is equivalent:

• Zero units: 0px becomes 0. Other units are left alone in most positions because some older browsers mishandled them.
• Leading zeroes: 0.5 becomes .5, and 0.50 becomes .5.
• Trailing zeroes: 50.10px becomes 50.1px, and 50.00px becomes 50px.
• Hex colours: #ffffff becomes #fff and #aabbccdd can lose a redundant alpha pair.
• Legacy colour syntax: comma-separated rgb(), rgba(), hsl() and hsla() are rewritten to the modern space-separated form where possible.
• Font weights: normal and bold become 400 and 700.

The colour rewrite is the one to watch. Modern space-separated colour syntax is not understood by Internet Explorer and is unsupported in very old WebViews. If you still support those browsers, keep the original stylesheet or disable that part of your build pipeline.

What it will not do

This is not a build system. It does not add vendor prefixes, merge duplicate rules, remove unused selectors, inline critical CSS, convert pixels to rem, or generate source maps. It does not check that your selectors match anything in the HTML. It also does not fix invalid CSS: a missing brace can make the rest of the file disappear from the output, because the parser treats it as part of the same broken block.

If you need those features, use a bundler or a dedicated CSS processor. Minification is the last, smallest step after the stylesheet is already correct.

calc(), custom properties and math

Whitespace around the plus and minus operators inside calc() is required by the CSS specification. The minifier extracts math expressions before collapsing whitespace and restores them, so expressions such as calc(100% - 2rem) should survive. Custom property values are also treated as token streams and extracted, because their contents can be almost anything.

That protection is not a guarantee for every edge case. If a stylesheet depends on unusual whitespace inside a custom property, minify a copy, diff the two files and test the component that uses the variable.

Modern CSS features

Nesting, @layer, @container, @scope and color-mix() are newer than the regex-based parts of the minifier. Most of them pass through as text, but a construct the library does not recognise can be rewritten incorrectly. Test any stylesheet that uses nesting or container queries before deploying the minified version, and keep the unminified file as the source of truth.

Fetching a stylesheet from a URL

The URL tab asks the server to download a public stylesheet and place it in the editor. The fetch is capped at 200,000 characters. A CDN URL usually works; a URL behind a login, a bot check or a signed cookie usually does not. The server fetches the raw response, so a link that returns an HTML error page will put HTML in the editor, not CSS.

Step by step

1. Paste the stylesheet into Manual Code, or load it through the URL tab.
2. Confirm the language is CSS and the mode is Minify.
3. Press Process Code and wait for the output editor to fill.
4. Compare the character badges above both editors.
5. Copy the result, or download it as minify-output.css.
6. Load a page that uses the stylesheet and check layout, colours and responsive breakpoints.

How much smaller will it be

A commented, hand-indented stylesheet can lose a large share of its bytes. A file already produced by Sass, Tailwind or another build tool may barely change, because the build already removed the whitespace. Treat the number as information, not as a score. The only meaningful test is whether the page still renders correctly.

Debugging minified CSS

Minified CSS is hard to inspect in developer tools because every rule sits on one line. Keep the original file and use source maps from your build when you need to trace a rule. If you inherit a minified file with no source, run it through the CSS Beautify page to get a readable version, then work from that copy. Beautifying will not recover comments or the original formatting, but it restores line breaks and indentation.

Common errors

An empty output usually means the input was empty or the request exceeded the size cap. A stylesheet that suddenly ends in the middle often has an unclosed brace or an unterminated string. A page that loses all styling after minification usually points to a broken URL, a missing @charset or a colour syntax that the target browser does not support. Revert to the original and bisect the file.

Limits and privacy

One stylesheet per run, 200,000 characters maximum, CSS mode on this page. The code is sent to the server for processing and returned in the response; the tool does not store it. Very large files belong in a local build step, where minification can run alongside the rest of the pipeline.

Frequently Asked Questions