✨ CSS Formatter
Beautify messy CSS to make it readable, or minify it to shrink file size. Choose your preferred indent style (2 spaces, 4 spaces, or tabs) and whether the opening brace stays on the same line. Useful for reading someone else's minified CSS, or for shrinking a stylesheet's size before shipping it to production.
How to use
- Paste the CSS you want to format or minify into the input box.
- Choose your indent width and brace placement style.
- Click "Beautify" or "Minify" to see the result on the right.
- Click "Copy" to copy the result to your clipboard.
How the calculation works
Formatting splits the CSS at "{", "}" and ";" into selectors and declarations (property: value), then lays them out again with indentation according to nesting depth, normalising to a single space after each ":". Comments (/* */) are set aside before formatting and restored to their places afterwards. Minifying works in this order: remove comments, collapse runs of whitespace and line breaks to single spaces, strip whitespace around "{", "}", ":", ";" and ",", and finally turn ";}" into "}" (the semicolon after the last declaration in a block is optional). Browsers do not use whitespace or comments for rendering, so removing them does not change how the page looks.
Worked example
Minifying this CSS /* Heading */ h1 { color: #333; margin: 0 auto; } becomes h1{color:#333;margin:0 auto} The comment and line breaks disappear, and so does the semicolon after the last declaration. The space in "0 auto" stays because it separates the two values.
Things to be aware of
- Minifying also removes spaces around ":". In a selector where that space matters, such as the descendant selector ".menu :hover", this changes its meaning.
- Minifying also collapses repeated spaces inside strings, such as content: "a b".
- SCSS and LESS syntax such as nesting may not format correctly.
- Formatting and minifying happen in your browser; your code is not sent anywhere.
FAQ
Does it support SCSS or LESS?
It's designed for standard CSS syntax. SCSS/LESS-specific nesting may not format correctly.
How much smaller does minifying make my file?
It strips comments and extra whitespace/line breaks. The exact reduction depends on your original code, but 10-30% is typical.
Can I make someone else's minified CSS readable again?
Yes — paste a single-line minified stylesheet and click "Beautify" to get an indented, readable layout.
Is my CSS sent to a server?
No, formatting and minifying happen entirely in your browser, with nothing sent externally.
Should I use tabs or spaces for indentation?
Match whatever convention your team or project already uses. If there's no house style, 2 spaces is a common default.