How do I use the Free CSS Minifier and Formatter?

Copy your CSS code and paste it into the input text area. Click Minify CSS to compress the code for production, or click Format CSS to beautify it for editing. Review the live size metrics, then copy or download your result.

What CSS formats and syntax are supported?

The tool supports standard CSS3, CSS4 draft features, CSS custom properties, calc() and clamp() functions, @media and @supports queries, @keyframes animations, container queries, and modern color syntax including oklch() and color-mix().

What output formats does the tool provide?

The tool outputs minified CSS with all whitespace and comments removed, or formatted CSS with proper indentation, line breaks, and normalized semicolons. Both outputs can be copied to clipboard or downloaded as .css files.

Is my CSS code kept private during processing?

Yes. All CSS minification and formatting happens entirely in your browser using client-side JavaScript. Your code is never uploaded to any external server, stored in a database, or transmitted over the network.

What is the difference between minifying and formatting CSS?

Minifying CSS removes all unnecessary characters — whitespace, comments, newlines, and redundant semicolons — to create the smallest possible file for production. Formatting CSS adds back indentation, line breaks, and spacing to make compressed code readable and editable for human developers.

Are there any file size or usage limits?

The tool handles CSS files of any length limited only by your browser's available memory. Most stylesheets under 1 MB process instantly. There are no daily usage limits, watermarks, or feature restrictions — completely free and unlimited.

CSS Minifier for Lighthouse Score — Remove Render-Blocking CSS Free

Instant — no serverUpload .css filesMinify & Format

Input CSS

Size: 0 B

Output

Choose an action below to process your CSS

All processing happens locally in your browser — your CSS is never uploaded to any server.

Tip: after minifying, click Re-use in the output panel to pipe the result back as input.

Why Minify or Format CSS?

CSS Minification

Removes whitespace, comments, and redundant characters from CSS files. Smaller files load faster, improving Core Web Vitals scores (LCP, FID) and reducing bandwidth costs — critical for SEO and user experience.

CSS Formatting

Beautifies compressed or poorly structured CSS into a consistent, human-readable format with proper indentation. Ideal for debugging, code reviews, and maintaining large stylesheets in a team environment.

Frequently Asked Questions

How much CSS minification actually reduces file size

Real-world CSS minification numbers depend heavily on how the original was written. Developer-formatted CSS with comments, blank lines, and long property names typically compresses 20–35%. A verbose CSS framework like a hand-written utility class file might compress 15–25%. Tailwind CSS output (which is already generated) typically compresses less because class names are short and there's little whitespace to remove. For comparison: Bootstrap 5.3 full CSS: 231 KB → 197 KB minified (15% reduction), but gzipped it drops to 26 KB — the takeaway: Gzip or Brotli compression on the server is worth far more than minification alone for large stylesheets.

What the minifier actually does to your CSS

Whitespace removalAll newlines, tabs, and multiple spaces are replaced with a single space or removed entirely. Spaces inside selectors and around combinators are removed where safe.
Comment strippingAll /* comments */ are removed. Exception: license comments starting with /*! are preserved by most minifiers to comply with open-source license requirements.
Color shortening#ffffff becomes #fff. rgb(0, 0, 0) becomes #000.
Zero value simplification0px, 0em, and 0% all become 0 — units on zero values are redundant in CSS.
Last semicolon removalThe final semicolon before a closing brace is optional in CSS. Minifiers remove it. Safe in all browsers.

When to use a bundler instead

This tool is for one-off minification of a finished stylesheet — a vendor file you're shipping as-is, or a CSS snippet you're inlining in an email. For production builds in a Next.js, Vite, or webpack project, minification happens automatically as part of the build step. Running a stylesheet through this tool before committing it adds no value in those setups — the bundler will minify it anyway (and do more, like dead-code elimination via PurgeCSS or Tailwind's JIT tree-shaking).

How minifying CSS improves your Lighthouse score

Lighthouse and PageSpeed Insights flag two CSS-related performance issues: "Eliminate render-blocking resources" and "Minify CSS". Both have the same fix: compress your CSS and deliver it as efficiently as possible. Here's what each Lighthouse audit is actually measuring:

Lighthouse audit	What it checks	Fix
Minify CSS	Whether CSS files contain whitespace and comments that add bytes without adding function	Minify CSS here → replace your existing .css file with the output
Eliminate render-blocking resources	CSS loaded in <head> blocks paint until fully downloaded	Inline critical CSS; defer non-critical CSS with media="print" + onload swap
Unused CSS	Selectors present in the CSS that match no elements on the page	Use PurgeCSS or Tailwind JIT after minifying — this tool handles whitespace, not dead code
Reduce initial server response time	TTFB — how fast the server sends the first byte	Minified CSS loaded from a CDN reduces TTFB for assets; enable gzip/Brotli compression on your server

For WordPress sites: install a caching plugin (LiteSpeed Cache, W3 Total Cache, or WP Rocket) that minifies CSS automatically on each page load. Manually minifying theme CSS here is useful for theme files you maintain directly — paste the minified output back into your theme's style.css.