🖌️ CSS Beautifier & Minifier
Paste CSS to beautify it with clean indentation, or minify it for production — nested @media blocks, strings and url() handled, entirely in your browser.
Frequently Asked Questions
What does the CSS beautifier do?
It puts each rule and declaration on its own line as "property: value;", indents declarations inside their selector block, and indents rules nested inside @media / @supports blocks one level deeper. Comments are kept and placed on their own lines.
What does Minify mode remove?
Comments, line breaks, indentation, spaces around { } : ; and selector commas, and the last semicolon before each closing brace. Typical hand-written CSS shrinks by 15–40%. The rules themselves are never changed.
Are calc(), url() and strings safe?
Yes. Content inside quotes and parentheses is never restructured — calc(100% - 20px) keeps the spaces around its operators (which CSS requires), and url(data:image/png;base64,...) values with semicolons or braces inside are passed through intact.
Are @media and other at-rules handled?
Yes. Block at-rules like @media, @supports and @keyframes are indented with their nested rules, and statement at-rules like @import and @charset are kept on their own lines with their terminating semicolon.
Does minifying CSS change how my page looks?
No. Only whitespace and comments are removed — every selector, property and value stays byte-for-byte identical, so the browser applies exactly the same styles.
Is my CSS uploaded to a server?
No. Formatting runs entirely in your browser with JavaScript — your stylesheet never leaves your device.