CSS Formatter & Beautifier
Format CSS with consistent indentation, spacing and selector normalisation.
Input
Output
Ready
Drop a file to load it
About this tool
Reformat CSS with one declaration per line, normalised selectors and consistent spacing. Works on minified stylesheets, hand-edited files and anything in between.
When you would use it
- Reading a minified stylesheet
- Normalising formatting before a code review
- Tidying a file several people have edited
Worked example
.card,.panel{color:#aabbcc;margin:0}@media (max-width:600px){.card{display:none}}
.card, .panel {
color: #aabbcc;
margin: 0;
}
@media (max-width: 600px) {
.card {
display: none;
}
}
Things worth knowing
- Selectors are normalised — combinators get consistent spacing and comma-separated lists are spaced evenly.
- Comments are preserved.
url()values and data URIs are never split, even though they contain colons. - At-rules such as
@mediaand@supportsare indented as blocks with their contents nested.
Questions
Frequently asked
Does it validate my CSS?
It parses the structure and will report unterminated blocks, strings and comments. It does not check that property names and values are valid CSS.
Is my data uploaded anywhere?
No. Every tool on JSONWorks runs entirely in your browser using JavaScript. Your input is never sent to a server, never logged and never stored. The simplest proof is to disconnect from the internet — the tools keep working. The site does load Google Fonts and a Google Analytics page-view tag, so you will see those two requests in your network tab, but neither receives anything you type or paste.
Related