CSS Minifier & Beautifier

CSS Minifier & Beautifier — Free CSS minifier and beautifier. Paste your CSS and minify it to reduce file size — removes comments, whitespace, and unnecessary characters. Or beautify minified CSS to make it human-readable again. No signup required.

—Original

—Output

—Saved

CSS Input

Minified CSS

CSS Input

Minified CSS

Why minify CSS?

Every byte a browser downloads has a cost — in time, bandwidth, and perceived performance. CSS files are often full of whitespace, comments, and formatting that humans need but browsers ignore. Minification strips that out, producing the smallest valid CSS that renders identically.

A typical stylesheet shrinks 20–40% after minification. For large codebases, that is hundreds of kilobytes saved per page load — improving Core Web Vitals scores and reducing hosting bandwidth.

What minification removes

Removed	Example
Comments	/* nav styles */
Newlines & indentation	\n \t (whitespace)
Spaces around { } ; :	.class { color : red ; }
Trailing semicolons	color: red; } → color: red}
Extra spaces in values	margin: 10px 20px → margin:10px 20px

Minify vs beautify — when to use each

Minify before deploying to production. Smaller files = faster page loads. Most build tools (Vite, Webpack, PostCSS) do this automatically, but this tool is useful for quick manual optimization or one-off files.

Beautify when you receive or inherit minified CSS and need to read or edit it. It restores indentation and line breaks, turning a single unreadable line back into structured, navigable code.

CSS file size benchmarks

File	Raw	Minified	Saving
Bootstrap 5	232 KB	197 KB	~15%
Tailwind (full)	3.7 MB	~700 KB	~81%
Foundation 6	195 KB	155 KB	~20%
Typical site	50–200 KB	30–130 KB	20–40%

Frequently Asked Questions

What does CSS minification do?

Minification strips comments, extra spaces, line breaks, and redundant semicolons while leaving selectors, properties, and values intact. The result is functionally the same CSS, just smaller and faster to transfer and parse. That makes it a good fit for production stylesheets and large component libraries.

Is minified CSS safe to use in production?

Yes. Minified CSS is the standard output of production build pipelines, and browsers read it the same way they read formatted CSS. The formatting disappears, but the rules do not. Tools like Vite, Webpack, and PostCSS often minify CSS automatically when you build for production.

How do I read or edit minified CSS?

Use the Beautify mode to expand minified CSS back into a readable, indented format. This is useful when inspecting third-party stylesheets or debugging production CSS.

Does this tool support SCSS or Less?

This tool processes standard CSS. SCSS and Less must be compiled to CSS first before minifying. The minifier will remove // line comments common in SCSS, but SCSS-specific syntax like variables ($var) and nesting may not format correctly in beautify mode.

Can minifying CSS break my site?

It should not, because minification is supposed to preserve the exact behavior of valid CSS. If a stylesheet behaves differently afterward, the usual cause is an existing syntax problem, an unsupported preprocessor feature, or a rule that depended on whitespace in an unusual way. Compile SCSS or Less first, then minify the resulting CSS.