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.