CSS Formatter
Paste CSS to beautify it with clean, consistent indentation, sort the properties in each rule alphabetically, or minify it for production. Media queries, nesting and comments are handled.
Everything runs in your browser. Files you open are read locally and never uploaded.
How to use the CSS Formatter
- Paste your CSS into the input box or open a .css file. Try Sample to see an example.
- Choose the indentation (2 spaces, 4 spaces or tab) and options such as sorting properties or putting each selector on its own line.
- Press Format CSS. The formatted code appears on the right and updates as you type.
- Press Minify instead to strip comments and whitespace; the size saving is shown below the output.
- Copy or download the result as a .css file.
Before and after
Minified input:
.nav a:hover,.nav a:focus{color:#2f6b4f;text-decoration:underline}@media (max-width:600px){.nav{display:none}}
Formatted with 2 spaces, selectors on new lines:
.nav a:hover,
.nav a:focus {
color: #2f6b4f;
text-decoration: underline;
}
@media (max-width:600px) {
.nav {
display: none;
}
}
What the formatter changes, and what it never touches
| Changed | Never changed |
|---|---|
| Line breaks and indentation | Text inside strings, such as content: "a , b" |
One space after : and after commas in values | Unquoted url(…) values, including data URIs |
Spaces around >, + and ~ combinators | Custom property values (--name: …), kept exactly as written |
Spacing before !important | Comments (in Format mode) and the order of rules |
Minify mode removes comments except /*! … */ licence comments, which are kept by convention. It also removes spaces around braces, colons, semicolons and commas, and the last semicolon in each rule. Spaces inside calc() are kept, because calc(100% - 2rem) stops working without them.
How property sorting works
With Sort properties on, declarations inside each rule are put in alphabetical order. Custom properties stay at the top in their original order. Vendor-prefixed versions such as -webkit-transition are placed directly before the standard transition instead of being grouped at the top. Repeated properties used as fallbacks, for example display: -webkit-box followed by display: flex, keep their order so the fallback still works. A comment directly above a declaration moves with it.
Alphabetical order makes it easy to see whether a property is already set and reduces merge conflicts. Watch out for a shorthand written after one of its longhands (border-top then border): sorting swaps them, and the later declaration is the one that applies.
Frequently asked questions
What does a CSS formatter do?
It rewrites CSS with one declaration per line and consistent indentation inside each rule and media query, so the stylesheet is easy to read and edit. It does not change what the CSS does.
Can I unminify CSS?
Yes. Paste minified CSS, for example from a production website, and press Format CSS. Every rule and declaration is put back on its own line. Comments that were removed during minification cannot be recovered.
Is sorting CSS properties safe?
Usually. Sorting only reorders declarations inside the same rule. It can change the result when a shorthand comes after a longhand of the same property, for example border-top followed by border, because the later declaration wins. Sorting keeps duplicate properties such as fallback values in their original order.
How much does minifying CSS save?
Typically 15 to 30 percent for hand-written CSS, more if it has many comments. The tool shows the exact size before and after. Servers that use gzip or Brotli compression shrink the difference further, but minification still helps.
Does it support SCSS or Less?
Plain CSS, CSS nesting and most SCSS that uses nested rules and variables format well because the structure is the same. Special syntax like mixins with arguments may not format perfectly.
Is my CSS uploaded?
No. Formatting happens entirely in your browser, so your code never leaves your device.