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 removes everything that is not needed for the browser to parse the CSS: whitespace, line breaks, comments, and redundant semicolons. The result is functionally identical but smaller — typically 20–40% smaller, which improves page load time.

Is minified CSS safe to use in production?

Yes — minified CSS is exactly what browsers prefer. It is the same rules and values, just without human-readable formatting. All modern build tools (Webpack, Vite, PostCSS) minify CSS automatically in production builds.

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.