How to use
- Paste your CSS into the Your CSS editor, or click Example to load a sample.
- Under Indent, choose 2 spaces, 4 spaces or Tab.
- Under Braces, choose Same line or Next line.
- For input over 100 KB, click Format CSS; smaller inputs format automatically.
- Click Copy to copy the result from Formatted CSS.
Examples
Expand a minified stylesheet
.site-header{background:#fff;padding:16px}.nav-link{color:#075985;text-decoration:none}.site-header {
background: #fff;
padding: 16px;
}
.nav-link {
color: #075985;
text-decoration: none;
}Use next-line braces for nested CSS
@media (min-width:768px){.product-grid{display:grid;grid-template-columns:repeat(3,1fr)}.product-card{padding:24px;&:hover{background:#f8fafc}}}@media (min-width:768px)
{
.product-grid
{
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.product-card
{
padding: 24px;
&:hover
{
background: #f8fafc;
}
}
}Sort properties with tab indentation
.product-card{padding:16px;--card-accent:#0369a1;color:#1e293b;border:1px solid var(--card-accent);background:#fff}.product-card {
--card-accent: #0369a1;
background: #fff;
border: 1px solid var(--card-accent);
color: #1e293b;
padding: 16px;
}Tips
- For SCSS or LESS use the Code Formatter.
- Need the smallest file? Minify CSS.
- Compare before/after in the Diff Checker.
FAQ
Why were some CSS properties not sorted?
Sort properties set to A–Z leaves a run of declarations in its original order if sorting would change which related property wins, such as margin-top followed by margin. A warning explains when this happens.
Can I format CSS into one line?
This formatter puts each declaration on its own line. To minify the result, click Minify → to open it in the CSS Minifier.
How do I find a CSS syntax error?
When parsing fails, the tool reports the line and column, highlights the error line in Your CSS and clears the output. Use the message to check for a missing brace, colon or semicolon.
Can I format SCSS or LESS here?
Use the Code Formatter for SCSS or LESS. This tool parses plain CSS; some preprocessor syntax may parse, but that does not mean SCSS or LESS formatting is supported.
Is my CSS uploaded to a server?
Formatting runs in your browser, and the tool's code does not upload your CSS. The page sends analytics events with the tool slug, not your CSS.