CSS Minifier — Minify CSS Online Free

CSS input

Share X / Twitter Facebook LinkedIn WhatsApp

How to use CSS Minifier

Paste your CSS — a full stylesheet or a block of custom styles.
Read the minified output and the size saving (original → compressed bytes).
Copy the result into your production stylesheet, CMS custom-CSS box or inline <style> block.
Keep the readable original as your working file — always edit source, re-minify, re-deploy.

What is CSS Minifier?

A CSS minifier compresses a stylesheet by removing everything the browser doesn't need: comments, line breaks, indentation, redundant whitespace and trailing semicolons. The rules are untouched — .card { margin: 0 auto; } becomes .card{margin:0 auto} — so the page renders pixel-identical while the file shrinks, typically by 20–40%.

Smaller CSS matters more than its byte count suggests: stylesheets are render-blocking, meaning the browser paints nothing until the CSS arrives. Every kilobyte trimmed comes straight off First Contentful Paint — one of the Core Web Vitals Google measures.

About the CSS Minifier

Paste your CSS and the minified version appears instantly with a size comparison — original vs compressed — ready to copy into production.

When a standalone minifier is the right tool: sites without a build pipeline (WordPress custom CSS boxes, Shopify theme tweaks, hand-coded sites, email templates); checking what your build tool actually produces; and compressing the small critical-CSS block you inline into <head>. Projects using bundlers (Vite, webpack) already minify on build — this tool covers all the CSS that lives outside that pipeline.

Workflow tip: keep the readable source file and paste the minified output only where it ships. Minification is one-way in practice — editing minified CSS is misery — so treat the output as a build artifact, not the working copy. Processing happens in your browser; your styles are never uploaded.

Frequently Asked Questions

No — only formatting is removed (whitespace, comments, line breaks); every selector and declaration survives byte-for-byte in meaning. If a page looks different after minifying, the CSS had a pre-existing syntax error the whitespace was masking.

Typically 20–40% of raw size, most of it comments and indentation. Combined with the gzip/brotli compression your server applies, total transfer often drops 60–80% versus the raw file.

They stack: minification removes characters before compression, and the browser also parses fewer bytes after decompression. Render-blocking CSS benefits from every layer — minify AND compress is the standard.

For theme custom-CSS boxes, yes — paste minified output there. For whole-site optimization, a caching/optimization plugin can minify automatically; this tool is for the pieces you control directly and for checking plugin output.

Formatting can be restored with a CSS beautifier (indentation and line breaks are re-derivable from the syntax), but comments are gone forever — they were deleted, not encoded. That's why you keep the source file.

Learn more

Minify CSS, JavaScript and HTML: Why and How

Minification shrinks your code so pages load faster. Here is what it does, how much it saves, and how to minify CSS, JS and HTML for free.

Read the guide