Minify CSS _

How CSS minification works

The minifier walks your stylesheet with a state-aware tokeniser that distinguishes protected regions (string literals and url() values) from editable whitespace where collapsing and stripping are safe.

1. Protect strings and URLs. Before any other transform, the tokeniser identifies every quoted string (“…” or ‘…’) and every url(…) argument and stashes them verbatim. Subsequent passes never touch these bytes, so a background-image URL with spaces or a content property with punctuation is preserved exactly.
2. Strip comments. /* … */ blocks are removed when the toggle is on. If the license-comment toggle is also on, /*! … */ blocks survive so MIT, Apache, and BSD licence headers remain in the output as required by those licences.
3. Collapse whitespace. Every run of spaces, tabs, and newlines collapses to a single space, then whitespace around the CSS structural characters {, }, ;, :, and , is removed entirely. The selector and value lists reflow the same way the browser’s parser reads them.
4. Optimise values. Optional passes lowercase hex color codes, collapse paired 6-digit hex channels to 3-digit shorthand (#aabbcc → #abc), and strip dimension units from zero values (0px → 0). The zero-unit pass skips values inside transform() calls where units are significant.
5. Report byte savings. Both the original and the minified text are measured with new TextEncoder().encode(…).byteLength, the same UTF-8 byte count a CDN or HTTP server sees on the wire. The metric strip shows original size, minified size, bytes saved, and the percentage saving.

Why minify CSS

• Faster render-blocking load. Browsers won't paint a single pixel until they've finished parsing the CSS. A 30 percent stylesheet cut shortens that block, lifts First Contentful Paint, and shows up directly in your Lighthouse Performance score.
• Lower CDN egress bills. CloudFront, Cloudflare, and Fastly all charge per gigabyte of egress. Trimming 20 percent off a stylesheet that ships on every page view becomes a real line on the invoice once monthly traffic crosses a few million views.
• Smaller embeds and email CSS. Transactional email templates inline their CSS to survive Outlook and Gmail rendering quirks, and every extra byte pushes you closer to Gmail's 102 KB clip threshold. Minifying before inlining keeps the message under the cap.
• No build-tool dependency. Quick one-off jobs, legacy repos without a build pipeline, and air-gapped environments don't always have room for a Node toolchain. You can run the pass here without installing PostCSS, cssnano, or anything else.

Common applications

CSS minification turns up at the end of nearly every front-end build pipeline and in several runtime contexts where byte counts matter.

• Production build pipelines: Webpack, Vite, Rollup, and Parcel all ship a CSS minification step in their production mode defaults. Running the pass here before commit lets you validate the output without triggering a full build.
• Embedding CSS in <style> tags: server-rendered frameworks that inline critical CSS into the HTML document benefit from the same byte saving as standalone stylesheets, and smaller inline CSS reduces Time to First Byte.
• Transactional and marketing email: email HTML inlines all CSS, so every kilobyte in the stylesheet adds to the total message size. Minifying before inlining keeps messages well under ESP size caps.

A worked example

Paste a 1 KB ruleset with two-space indentation, blank lines between selectors, a licence comment block at the top, and verbose hex colors like #FFFFFF and zero-padded margins like margin: 0px. With every option toggled on, the output collapses to around 600 bytes — a 40 percent saving — while the rendered page looks byte-equal to the source.

Does minification change my CSS behaviour?

No, on the default toggles. The minifier only removes bytes the CSS parser already discards — whitespace, comments, the optional final semicolon — and skips inside transform() where units are significant. Every selector, property, and value is preserved.

Does it work with SCSS or LESS?

Only after you compile them to plain CSS. SCSS and LESS syntax (variables, nesting, mixins, & parent selectors) is not valid CSS and the minifier will mangle it. Compile your preprocessor source first, then paste the compiled output here.

Why are my licence comments stripped?

"Remove comments" is on by default and clears every /* … */ block. Enable "Preserve /*! licence comments" to keep blocks starting with /*!. MIT, Apache, and BSD all require the copyright header to ship with redistributed CSS.

How much can I save?

Hand-authored CSS usually drops 15 to 35 percent. Heavily commented or deeply indented files with many colour literals can reach 40 percent. Compiled output from Sass or CSS-in-JS is often partly minified already and saves less — typically 5 to 15 percent.

Run CSS minification in a browser tab and you skip the Node toolchain entirely. Paste the stylesheet above, toggle the options to match how aggressive you want the pass to be, then copy the output or download it as .min.css. No upload, no account, no vendor library.