CSS Formatter & Beautifier
Free tool No sign-up
About this tool
Paste minified or messy CSS and instantly get a cleanly indented, readable version — configurable indent, optional alphabetical sorting, lowercase hex, and live preview.
Advertisement
Why format CSS?
Read minified CSS in seconds
Production stylesheets ship as one long line of unreadable tokens. Paste them here and get them back as proper indented CSS — useful for inspecting third-party themes, debugging vendor styles, or auditing what your build actually produces.
Clean up messy authoring
Inconsistent indents, stray whitespace, or mixed bracket styles inherited from old codebases? One paste, one click — every rule comes out with the same shape, ready to commit.
Match a team style guide
Pick 2- or 4-space indent, optional alphabetical property order, optional lowercase hex. The output stays consistent across every paste so your code reviews stop fighting over formatting.
No setup, no toolchain
Prettier and stylelint are great in a real project, but for a one-off snippet, an embedded style block, or a quick experiment, opening a tab beats spinning up a config file every time.
How to use this formatter
01
Paste any CSS
Drop in minified output, messy authoring, a single rule, or a full stylesheet. Comments are preserved, @-rules are formatted, and nested blocks get correct indentation.
02
Pick your style
Choose 2- or 4-space indent, toggle blank lines between rule blocks, optionally sort properties alphabetically, optionally lowercase hex colours. Settings apply live as you type.
03
Read the diff signals
The stats bar shows lines in vs lines out, plus byte delta. A negative size delta is a sign your input was already pretty close — most minified inputs grow 3–5× when expanded.
04
Copy or download
Click Copy for the clipboard, or Download to grab a styles.formatted.css file. Either way the output is ready to drop into a code review, a documentation block, or back into your editor.
Formatting rules at a glance
| Rule | Before | After |
|---|---|---|
Expand selector list | .a,.b,.c{color:red} | .a,
.b,
.c {
color: red;
} |
Indent nested rules | @media(min-width:768px){.a{padding:8px}} | @media (min-width: 768px) {
.a {
padding: 8px;
}
} |
Space around colon | color:red | color: red; |
Single space in selectors | .a > .b | .a > .b { |
Add trailing semicolon | color:red} | color: red;
} |
Preserve comments | /*! License */.a{...} | /*! License */
.a {
...
} |
Lowercase hex (optional) | color:#FF0099 | color: #ff0099; |
Sort A→Z (optional) | z-index:1;color:red;background:blue | background: blue;
color: red;
z-index: 1; |
Formatting patterns
Before
.btn{display:inline-flex;padding:12px 24px;background:#7c6cff;color:#fff;border-radius:8px;font-weight:600}.btn:hover{background:#6a5ae0} After
.btn {
display: inline-flex;
padding: 12px 24px;
background: #7c6cff;
color: #fff;
border-radius: 8px;
font-weight: 600;
}
.btn:hover {
background: #6a5ae0;
} @media
/* before */
@media(min-width:768px){.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}}
/* after */
@media (min-width: 768px) {
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
} Pro tips
01
Format, don't rewrite
This tool only changes whitespace, indentation, and (optionally) hex casing or property order. Selectors, values, and rule order stay byte-equivalent — diffs in code review will read as pure formatting changes.
02
Pair with the minifier
Use this tool to read a minified bundle, then paste the human-readable version into our CSS Minifier to confirm the output round-trips. Catches edge cases where a third-party minifier got too aggressive.
03
Pick one indent and stick with it
Pick 2 or 4 spaces and lock it across the codebase. Most modern CSS projects use 2-space (matches Prettier and the Tailwind ecosystem); larger codebases sometimes prefer 4-space for visual nesting clarity.
04
Sort cautiously
Alphabetical property order helps readability and reduces merge conflicts, but it can break carefully-ordered cascade tricks (e.g. shorthand-then-override patterns). Off by default for that reason — turn on only when you know the rule order doesn't matter.
Related tools
Advertisement