Will this break my CSS?

This tool only removes provably safe characters: whitespace outside of string literals and attribute selectors, CSS comments, and trailing semicolons before }. It doesn't reorder properties, remove vendor prefixes, merge rules, or modify property values. That said, always test on a staging environment before deploying minified CSS to production.

What size reduction should I expect?

Unminified CSS from preprocessors with developer comments and indentation typically sees 30-50% reduction. CSS that's already been through a build tool (like Tailwind's JIT output) may only see 5-10% since it's already compact. The tool shows exact before/after bytes so you can evaluate the gain.

Should I minify CSS or use a CDN?

Both — they solve different problems. A CDN reduces latency by serving files from geographically close servers. Minification reduces file size. For maximum performance: host on a CDN, serve gzip/Brotli compressed, and serve minified files. These are complementary layers, not alternatives.

Can I use this for SCSS or Less?

This tool expects compiled CSS output, not preprocessor syntax. SCSS and Less have their own comment syntax (// single-line comments) and features that need preprocessing first. Compile your SCSS/Less to CSS first, then paste the compiled output here for minification.

Technical SEO

CSS Minifier

Paste CSS to strip comments, collapse whitespace, and remove unnecessary semicolons. Shows exact byte savings before and after. Instant, client-side.

How to use this tool3 quick steps

Copy your CSS
A whole stylesheet, a single rule, or any fragment. We handle media queries, keyframes, and comments correctly.
Paste below
We remove whitespace and CSS comments, then output a single-line minified version.
Compare the size saving
The byte-count difference appears at the top of the result. For production, prefer your build tool — this helps for one-off checks.

InputCSS to minify· Stylesheet, <style> block, or fragment

Options

OutputMinified CSS· Awaiting input

Use this with

See all 8 tools

HTML Minifier

Strip whitespace & comments

JSON Formatter

Format, validate & minify JSON

Text Encoder / Decoder

Base64, URL, HTML entities, Hex

CSS Performance Guide

CSS minification: free page speed for every project

CSS is a render-blocking resource — browsers must download and parse your stylesheets before rendering the page. Minifying CSS reduces file size without affecting rendering, directly improving Time to First Byte and First Contentful Paint. For stylesheets generated by preprocessors (Sass, Less, PostCSS), build pipelines often leave whitespace and comments that add 20-40% unnecessary overhead.

What CSS minification removes

Comments (/* ... */), whitespace between selectors and properties, spaces around { } : ; , operators, blank lines, trailing semicolons before closing braces (redundant in CSS), and unnecessary whitespace inside property values. None of these affect how browsers interpret the CSS.

CSS is render-blocking

The browser won't paint anything until it has downloaded and parsed all CSS in the <head>. Every byte you can remove from your critical CSS reduces the rendering delay. For stylesheets that affect above-the-fold content, even a 5KB reduction in CSS size can improve Largest Contentful Paint measurably.

Minification before gzip: the multiplicative effect

CSS compresses extremely well with gzip/Brotli — typically 70-80% reduction. Minification before compression gives another 15-25% reduction on top of that. The combination (minify first, then gzip) consistently outperforms compression alone. Modern CDNs handle gzip automatically; minification is the step you add.

Critical CSS vs full stylesheet minification

Critical CSS is the subset of styles needed to render above-the-fold content. Inlining critical CSS (minified) directly in the <head> eliminates the render-blocking stylesheet request entirely. Full stylesheet minification is complementary — it reduces the payload of the full CSS that loads after initial render.

Build pipeline integration

For production use, CSS minification belongs in your build pipeline: Sass → cssnano (PostCSS plugin), webpack → css-minimizer-webpack-plugin, Vite → built-in minification, Gulp → gulp-clean-css. This tool is for ad-hoc minification, testing, and understanding what's being removed.

CSS source maps for debugging

When minifying for production, generate source maps (.css.map files) so browser DevTools can map minified CSS back to the original. Without source maps, debugging minified CSS is extremely difficult. This tool doesn't generate source maps — for dev workflows that need them, use a build tool.

Pro Tips

Minify third-party CSS too

Not just your own CSS — third-party libraries often ship unminified or lightly minified. Check Bootstrap, Tailwind (when not using PurgeCSS), or FontAwesome CSS files. Their CDN versions are usually minified, but locally hosted copies may not be.

Verify the output renders correctly

After minifying, test in a staging environment. While this tool only removes safe whitespace and comments, always verify critical rendering paths. Pay special attention to calc() expressions and custom property declarations, where whitespace can occasionally matter.

Use with HTML Minifier for combined savings

If you have inline CSS in <style> blocks within your HTML, minify the CSS separately here, paste it back, then minify the combined HTML. Running HTML minification on un-minified inline CSS is less effective than pre-minifying the CSS first.

Frequently Asked Questions

Will this break my CSS?: This tool only removes provably safe characters: whitespace outside of string literals and attribute selectors, CSS comments, and trailing semicolons before }. It doesn't reorder properties, remove vendor prefixes, merge rules, or modify property values. That said, always test on a staging environment before deploying minified CSS to production.
What size reduction should I expect?: Unminified CSS from preprocessors with developer comments and indentation typically sees 30-50% reduction. CSS that's already been through a build tool (like Tailwind's JIT output) may only see 5-10% since it's already compact. The tool shows exact before/after bytes so you can evaluate the gain.
Should I minify CSS or use a CDN?: Both — they solve different problems. A CDN reduces latency by serving files from geographically close servers. Minification reduces file size. For maximum performance: host on a CDN, serve gzip/Brotli compressed, and serve minified files. These are complementary layers, not alternatives.
Can I use this for SCSS or Less?: This tool expects compiled CSS output, not preprocessor syntax. SCSS and Less have their own comment syntax (// single-line comments) and features that need preprocessing first. Compile your SCSS/Less to CSS first, then paste the compiled output here for minification.