CSS Minifier and Beautifier
Compress a CSS file down to one line, or beautify messy CSS into clean, readable code.
This tool runs entirely in your browser. Your CSS is never uploaded to any server.
How to use this tool
Pick a mode at the top. Choose Minify to compress your CSS file by stripping out
comments and collapsing every bit of unnecessary whitespace, or choose Beautify to expand
compact CSS into clean, indented code that is easy to scan. Paste your stylesheet into the input box and
press the action button. The result appears in the output box, where you can copy it or download it as a
.css file. When you minify, the tool also shows how many bytes you saved.
How the CSS minifier works
Minifying is done with a few small, readable regular expressions. First it removes every CSS comment
written as /* ... */. Then it collapses runs of spaces, tabs, and line breaks into single
spaces and trims the padding around the structural characters {, },
:, ;, and ,. It also drops the final semicolon before each closing
brace because it is optional. Beautifying does the reverse: it adds a line break and two-space indentation
after every opening brace, a line break after each semicolon, and a line break before every closing brace,
so each rule and declaration sits on its own line.
A real example
Suppose you paste this stylesheet and choose Minify:
The tool returns the compact, single-line version with the comment gone:
.card{color:#333;padding:12px}. That trimmed the input from about 60 bytes down to roughly
30 bytes. Switch to Beautify and feed that one-liner back in, and you get the indented, multi-line layout
again. The styling itself never changes, only the spacing and comments.
Common questions
What is a CSS minifier and why use one?
A CSS minifier removes comments and extra whitespace to make your stylesheet smaller. Smaller files download faster, which helps page speed in production. Keep a readable copy for editing and serve the minified version to visitors.
Does minifying ever break my styles?
No. This tool only removes characters that browsers ignore, such as comments and whitespace between tokens. The actual selectors, properties, and values stay exactly the same, so the rendered result is identical.
Can I use the CSS beautifier on already minified code?
Yes. Paste your one-line or compressed CSS, choose Beautify, and the tool spreads each rule and declaration onto its own indented line so you can read and edit clean CSS code again.
Is my CSS uploaded anywhere?
No. All processing happens locally in your browser with plain JavaScript. Nothing you paste is sent to a server or stored, so it is safe for private or proprietary stylesheets.
Does it handle media queries and nested braces?
Yes. The whitespace and comment rules apply the same way inside media queries and other at-rules, so blocks with nested braces compress and expand correctly along with the rest of the file.