CSS beautifier
Paste minified CSS from a site or library to read and edit it easily. The tool does not change any value or string.
Loading the tool…
Processing and privacy: The result is calculated inside your browser and your data is not sent to any server.
How to use it
- Enter css code and indent.
- The result appears straight away and updates as you edit.
- Copy the result, or copy a link that keeps the same values to share it.
How it is calculated
Strings and comments are protected first. Then a new line follows { and every ;, indentation grows inside each block, } goes on its own line, selectors split after commas, and a missing ; is added before }.
Example
Inputs: Indent = 2 spaces. Result: Formatted CSS: .btn { color: #fff; padding: 8px 16px; } .btn:hover, .btn:focus { opacity: .9; } @media (max-width:600px) { .btn { width: 100%; } }; Lines: 15.
.btn{color:#fff;padding:8px 16px}.btn:hover,.btn:focus{opacity:.9}@media (max-width:600px){.btn{width:100%}}.btn {
color: #fff;
padding: 8px 16px;
}
.btn:hover,
.btn:focus {
opacity: .9;
}
@media (max-width:600px) {
.btn {
width: 100%;
}
}Limits and caveats
- It does not reorder properties or remove duplicates.
- Selectors keep their original spacing; no spaces are added around > or +.
Questions about this tool
Does formatting change how my site looks?
No. It only adds spaces and line breaks, and adding the final ; before } is valid CSS that changes nothing.
Does it handle media queries and nested CSS?
Yes. Each inner block gets one more level of indentation.
How do I minify it again after editing?
Use the CSS minifier on this site to strip the spaces and comments again.