🎨 CSS Formatter
Format and beautify CSS code. Proper indentation, consistent spacing, and readable output — all in your browser, no upload, instant results.
About the CSS Formatter
This CSS formatter runs entirely in your browser. Paste your CSS into the input box, choose an indentation style, and click Format to get cleanly indented output. It handles regular rules, @media queries with nested indentation, @keyframes, and comments. Nothing is uploaded to a server — all processing happens locally with JavaScript.
Features
- Rules — Each rule is printed as
selector {on its own line, properties indented one level, closing brace on its own line. - @media queries — Rules inside
@mediaare indented an extra level for visual hierarchy. - @keyframes — Keyframe percentages are indented like properties.
- Comments — Both
/* ... */block comments are preserved on their own lines. - Spacing — A single space after each colon, semicolon at end of each declaration.
How to use
- Paste your CSS content in the input box.
- Choose your preferred indentation style.
- Click Format to beautify the CSS.
- Click Copy to copy the result, or Clear to start over.
Frequently asked questions
Does this tool upload my CSS? No. All formatting happens locally in your browser. Your styles never leave your device.
What about preprocessors like SCSS or LESS? This formatter targets plain CSS. SCSS/LESS syntax with nesting and variables may not be perfectly indented but will still be readable.
Does it preserve my existing comments? Yes, comments are kept and placed on their own lines in the output.
Are vendor-prefixed properties handled? Yes, properties like -webkit-transform are treated like any other property and indented normally.