Micro Tools
Advertisement

CSS Formatter

Clean up messy CSS into readable, indented code, or minify it for production. Free, instant, private.

CSS input

Paste CSS, choose an action, get the result live.

Result

Advertisement

How formatting works

Beautify strips comments, normalizes whitespace, then walks the CSS character by character: each opening brace starts a new indented block, each declaration gets its own line, and closing braces dedent. Minify does the reverse, removing every byte that browsers do not need, including the last semicolon in each block.

When to use each mode

Beautify pasted or generated CSS before debugging or code review so you can actually read it. Minify right before deploying to production to shrink file size and speed up page loads.

Related tools

JSON formatterFormat and validate JSON, privately. Regex testerTest regex live with highlighting. Base64 encoderBase64 encode and decode, plus URL encoder and JWT decoder.

CSS Formatter FAQs

Will it break my CSS?
The formatter only changes whitespace and never touches selectors, values or order, so the CSS behaves identically. Minify additionally shortens hex colors like #aabbcc to #abc, which is equivalent.
Does it handle @media and @keyframes?
Yes. Nested blocks indent one more level, so media queries and keyframes format readably just like normal rules.
What about CSS variables and calc()?
They pass through untouched. The parser treats everything between braces as declarations, so custom properties and functions survive formatting and minification.
How much smaller does minify make files?
Typically 20-40% smaller than hand-written CSS, more for heavily commented code. The stats line shows your exact before/after sizes.
Is my stylesheet uploaded anywhere?
No. Formatting and minification run entirely in your browser tab.
Advertisement