CSS Formatter & Beautifier
Format and beautify CSS, SCSS and Less online with Prettier. Pick the indent, print width and quote style. Also minify plain CSS and validate for syntax errors.
How to use CSS Formatter
- 1Paste a stylesheet or open a .css, .scss or .less file, and choose CSS, SCSS or Less.
- 2Set the indent, print width and quote style in the options row.
- 3Copy or download the formatted code, or change Mode to Minify or Validate.
What makes it better
- Prettier postcss parser for CSS, SCSS and Less
- 2 space, 4 space or tab indent, print width and quote style
- Reports unclosed blocks and stray braces with line and column
- Minify (plain CSS) and Validate modes on the same page
- Works with custom properties, media queries and nesting
About CSS Formatter
The CSS Formatter rewrites a stylesheet with Prettier's postcss parser: one declaration per line, consistent indentation and spacing, and your choice of single or double quotes. A language switch handles CSS, SCSS and Less, and the Mode switch on the same page minifies plain CSS or validates syntax with line and column. Nothing is uploaded; the stylesheet is processed in your browser.
Common uses
- Expand a minified production stylesheet so you can read and debug it.
- Give a copied snippet the same indent and quote style as the rest of your project.
- Tidy SCSS or Less source before committing it so reviews show real changes.
- Find the missing brace that is breaking a stylesheet.
Example
Input
:root{--brand:#be123c;--gap:16px}body{margin:0;font:16px/1.5 "Inter",sans-serif}.card{display:flex;gap:var(--gap);padding:16px 24px;border:1px solid #e5e7eb}.card:hover{border-color:var(--brand)}@media (max-width:600px){.card{flex-direction:column}}Result
:root {
--brand: #be123c;
--gap: 16px;
}
body {
margin: 0;
font:
16px/1.5 "Inter",
sans-serif;
}
.card {
display: flex;
gap: var(--gap);
padding: 16px 24px;
border: 1px solid #e5e7eb;
}
.card:hover {
border-color: var(--brand);
}
@media (max-width: 600px) {
.card {
flex-direction: column;
}
}
Good to know
- Formatting only changes layout: it does not sort properties, remove duplicates or fix invalid values.
- SCSS and Less are parsed as the preprocessor language, but unusual syntax such as complex Less guards or mixin tricks can occasionally fail to parse.
- Comments are kept, and long selector lists and values are wrapped at the print width.
CSS Formatter FAQ
How do I beautify minified CSS?
Paste the minified stylesheet into the input box and the formatted version appears beside it. Each rule is expanded to one declaration per line, using the indent and quote style you picked in the options row.
Can it format SCSS and Less as well as CSS?
Yes. The language switch at the top selects CSS, SCSS or Less, and Prettier's postcss parser handles nesting, variables and mixins in each. Pick the matching language, otherwise a preprocessor file may be reported as a syntax error.
What does the Validate mode check?
It reports syntax problems the parser can find, such as an unclosed block, an extra closing brace or a declaration with no colon, each with a line and column. It does not check that a property name exists, that a value is allowed or which browsers support it.
Does formatting change what my CSS does?
No. Only whitespace, line breaks and quote style change, so the cascade and the rendered page stay the same. Use the Minify mode if you want the opposite, a compact file for production.
Is the stylesheet uploaded when I format it?
The CSS stays in your browser tab and is parsed locally. Large files above about 200 KB are handled in a background worker so the page stays responsive.