Format CSS you maintain with one consistent style: the same indentation, spacing and spelling everywhere. Runs the same formatter as CSS Beautifier.
What it does
CSS Formatter gives hand-written CSS one consistent style: the same indentation, one declaration per line, even spacing around colons, commas and braces, and the same spelling for numbers, colors and quotes. Use it before a review or a commit, so a diff shows what you changed and not how the lines happened to be laid out.
CSS Beautifier runs this same formatter, so the same input gives the same result on either page. This page is for CSS you maintain: what each rule selects and sets does not change, your comments and the order of your rules stay, and nothing is repaired, renamed or sorted.
What it supports
- Standard CSS, including at-rules such as @media, @font-face, @keyframes, @layer and @page, and the native CSS nesting that browsers support. Comments are kept.
- Indentation of 2 or 4 spaces, never tabs. Line breaks in the result are always the same kind, whatever your text used.
- What is made uniform: property names and hexadecimal colors in lowercase, double quotes instead of single quotes, even spacing after colons and commas, and a semicolon after the last declaration of each block. A value with several comma-separated parts, such as a transition list, can be put one part per line.
- Numbers are written in one spelling, so a number may look different afterwards: 0.50px becomes 0.5px, 10.0 becomes 10, .5 becomes 0.5 and 1E3 becomes 1e3. Its value does not change.
- Names stay as you wrote them: class names and element names in selectors keep their case, and so do the names and the values of custom properties.
- A run of blank lines becomes one blank line, and the blank lines you keep stay where they are.
- Nothing is fetched: @import and url() stay as text. Properties and values are not checked against the CSS specifications, so a made-up property is formatted like a real one.
Good to know
- These are refused, with no result: an unclosed block, string, comment, parenthesis or square bracket; a stray }, ) or ]; and an unquoted url() that contains a space or a quote. The message gives the line and column, and nothing is repaired. A literal ) or ] inside a name or an address has to be written as \) or \]. Parentheses or square brackets nested more than 64 levels deep are refused as well.
- Sass, SCSS and Less are not supported. A $variable, @mixin, @include, a Less @variable: value, a // comment or #{interpolation} is refused, and a Less mixin call such as .rounded(); is refused as a syntax error. The tool never compiles or converts anything, and it does not detect every Less construct: some look like plain CSS and are formatted as such.
- A text with only a comment is formatted. A text with only blank lines has nothing to format, so you get a note asking for content.
- Large files can be slow to format, and minified CSS gets longer when it is formatted. If a run is stopped at the time limit, or the result would pass the size limit, try a smaller input.
- If indentation would make the result far larger than the size limit, the tool stops before formatting. Use 2 spaces or less nesting.
How to use it
- Paste or type your CSS in the input box. Nothing runs while you type.
- Pick the indentation your project uses, “2 spaces” or “4 spaces”, and press “Format”.
- Compare the result with your input. A rule that cannot be read as standard CSS is refused with its line and column, so you can fix it and run the tool again.
- Press “Copy” to paste the formatted CSS into your project, or “Download” to save it as formatted.css.
Examples
Bring a hand-written file to one style
Paste the CSS below and press “Format” with “2 spaces” selected. The uneven indentation and the stray spaces go, COLOR becomes color, the hexadecimal colors become lowercase, .5em 1.50em becomes 0.5em 1.5em, the single quotes become double quotes and the missing semicolon after the last declaration is added. The class name .btn keeps its case, and the run of blank lines inside the first rule becomes a single blank line.
.btn {
COLOR:#FFF;
background : #0A66C2;
padding:.5em 1.50em;
font-family: 'Inter', sans-serif
}
.btn:hover{background:#084E96}
.btn {
color: #fff;
background: #0a66c2;
padding: 0.5em 1.5em;
font-family: "Inter", sans-serif;
}
.btn:hover {
background: #084e96;
}
A stray closing parenthesis
There is one parenthesis too many at the end of the calc(). The tool does not guess which one was meant, so it refuses and points at the extra one.
.a{width:calc(100% - 2rem));}This closing parenthesis ()) has no matching opening parenthesis. Remove it, or add the opening parenthesis it belongs to. To write a literal parenthesis in a name or an address, escape it as \).
Line 1, column 27
Custom properties stay as written
The value of a custom property (a name that starts with --) means whatever the code that reads it decides, so the tool does not rewrite it: #FFF and 1.50rem stay as written, apart from the spaces around them. Outside a custom property, 1.0em becomes 1em.
:root{--Brand-Color:#FFF;--Gap: 1.50rem }
.btn{color:var(--Brand-Color);padding:var(--Gap) 1.0em}:root {
--Brand-Color: #FFF;
--Gap: 1.50rem;
}
.btn {
color: var(--Brand-Color);
padding: var(--Gap) 1em;
}
A Less mixin call
A mixin call is Less, not CSS: to CSS it looks like a declaration with no colon. Less is not supported, so the tool refuses and points at the line where it stopped understanding.
.btn{
.rounded();
color:red
}The CSS is not valid at this point. For example, a declaration has no colon, a rule has no selector, or the text is not CSS at all. CSS is never repaired for you, so fix it and run the action again. This tool formats standard CSS only, so Sass, SCSS and Less syntax can also cause this.
Line 2, column 3
Limits and privacy
Size limits
- Input: up to 2,000,000 bytes of UTF-8 text (about 2 MB). Accented letters and emoji take more than one byte each. Larger input is rejected.
- Result: also up to 2,000,000 bytes. If the complete result would be larger, the tool shows only an incomplete preview of the first 100,000 bytes, and that preview cannot be copied or downloaded.
- Nesting: up to 256 levels of open braces, parentheses and square brackets counted together inside each other. Deeper CSS is refused because it is beyond what the tool processes.
- Brackets: an independent cap of 64 open parentheses and square brackets counted together, within the combined nesting limit above. Deeper CSS is refused because it is beyond what the tool processes.
- Time: a run that takes longer than its time limit is stopped. Try a smaller input.
Your privacy
The text you type or paste, or open from a local file, is processed locally in your browser, in a dedicated Web Worker. It is never uploaded or sent to the server (a file you open is read in your browser only), and it is not written to storage, cookies or the address bar.
“Copy” puts the result on your clipboard and “Download” saves it as a file, but only when you press the button. The file is created in your browser, so nothing is uploaded.
For the full details, see the Privacy Policy
Related tools and pages
Your text stays in the page when you switch tools in the same tab, so you can try the same text in another tool. Reloading or closing the tab ends it.