What it does
The CSS Formatter puts each rule and declaration on its own line with consistent indentation and a blank line between rules. It makes minified or hand-written stylesheets easy to read, review and compare.
How to use it
- Paste CSS into Input, or click Sample.
- Click Beautify.
- Choose the indent, and tick Keep blank lines to keep the blank lines you already had.
- Copy or download the result.
Example
.btn{margin:0}.btn,.link{color:#fff}
Beautified:
.btn {
margin: 0
}
.btn,
.link {
color: #fff
}
Good to know
- Media queries,
@supports, keyframes and custom properties are formatted too. - SCSS and Less usually format correctly, because their syntax is close to CSS.
- To compare two versions of a stylesheet, format both first and then use the Diff Finder.
FAQ
Does it change my styles? No. Only whitespace and line breaks change; selectors, values and order stay the same.
How do I make CSS smaller instead? Use the CSS Minifier.