CSS Minifier & Beautifier

About CSS Minifier

This free online CSS minifier and beautifier helps you optimize CSS for production or format minified CSS for readability. All processing runs entirely in your browser — no data is sent to any server.

What Does Minification Do?

• Removes all comments (/* ... */)
• Strips unnecessary whitespace, newlines, and indentation
• Removes trailing semicolons from declaration blocks (optional)
• Compresses spaces around selectors, colons, and braces
• Typically reduces CSS file size by 20-40%

What Does Beautifying Do?

• Adds proper indentation to nested rules
• Places each declaration on its own line
• Adds spaces after colons and around braces
• Makes minified CSS readable and editable

FAQ

Should I minify my CSS?

Yes, for production. Minified CSS loads faster because there's less data to transfer. Most build tools (webpack, Vite, esbuild) minify CSS automatically. This tool is useful for quick one-off minification or when you don't have a build pipeline.

Does minification change how CSS works?

No. Minification only removes whitespace and comments — it doesn't change selectors, properties, or values. Your CSS will render exactly the same in the browser.

How much smaller will my CSS be?

Typical savings are 20-40% depending on how much whitespace and comments your original CSS has. Well-commented code with consistent formatting will see the biggest reductions. The stats panel shows exact savings.

What about CSS variables and custom properties?

This minifier handles CSS custom properties (--variable-name) and all modern CSS features correctly. It only removes whitespace and comments without modifying values.