About the CSS Formatter
Make compressed or messy stylesheets readable again: one declaration per line, consistent spacing and indentation, for CSS, SCSS and Less.
Key features
- CSS, SCSS and Less
- One declaration per line
- Consistent spacing and indentation
- Handles media queries, custom properties and nesting
- Upload a .css file or paste code
- Private: runs in your browser
Clean up any stylesheet
Minified CSS from a website or framework, or styles written in a hurry, are hard to read and maintain. Format them with consistent indentation and one declaration per line, using Prettier.
Before and after
.btn{display:inline-flex;padding:.5rem 1rem;border-radius:8px}.btn:hover{opacity:.9}
becomes
.btn {
display: inline-flex;
padding: 0.5rem 1rem;
border-radius: 8px;
}
.btn:hover {
opacity: 0.9;
}
Formatting conventions
| Rule | Example |
|---|---|
| One declaration per line | color: red; |
| Space after the colon | margin: 0; |
| Leading zero on decimals | 0.5rem |
| Hex colors in lowercase | #FFF → #fff |
Related tools
CSS minifier, HTML formatter, and JavaScript formatter.
How to use the CSS Formatter
- Paste your code into the input box, upload a file, or click Sample to try it out.
- Choose the options you want, such as indentation, line width or dialect.
- The result appears instantly in the output panel. Syntax errors are shown with their line and column.
- Click Copy to copy the result, or Download to save it as a file.