CSS Beautifier & Formatter

Paste minified or messy CSS and instantly get clean, indented, syntax-highlighted output. Flags duplicate properties, missing vendor prefix fallbacks, !important overuse, and more.

Indent: 2 spaces 4 spaces Tabs

Paste your CSS above and click Beautify CSS to see the result.

About the CSS Beautifier

This free online CSS beautifier takes minified, concatenated, or poorly formatted CSS and reformats it with consistent indentation, one declaration per line, and proper spacing — making stylesheets readable, maintainable, and easy to debug.

Features

Syntax highlighting — selectors, properties, values, colours, functions, comments
Choose between 2-space, 4-space, or tab indentation
Handles @media, @keyframes, @font-face, @supports and other at-rules
Comma-separated selectors placed on separate lines
Code quality hints — duplicate properties, missing vendor prefix fallbacks, !important overuse, zero values with units
Copy to clipboard or download as a .css file
100% client-side — your code never leaves your browser

How to use

Paste your CSS into the input box (or click Sample to load an example).
Select your preferred indentation style.
Click Beautify CSS to format.
Review any code quality hints shown above the output.
Copy the result or download it as a .css file.

Code quality hints

Duplicate properties — when the same property appears twice in a rule, only the last value applies. The earlier one is dead code.
Missing vendor prefix fallback — vendor-prefixed properties (e.g. -webkit-transform) should always be followed by the unprefixed standard property.
!important overuse — !important overrides the cascade and makes debugging very difficult. Use specificity instead.
Zero values with units — 0px, 0em etc. are redundant; 0 has no unit.
Large magic numbers — very specific pixel values may be fragile. Consider relative units like rem, %, or vh.