CSS Formatter & Minifier
Beautify CSS with proper indentation, or minify it and see the bytes saved.
The CSS Formatter beautifies raw, generated or minified CSS with each rule and declaration on its own line, and minifies it for production while reporting the bytes saved. Works with modern CSS — nesting, custom properties and media queries.
- ✓Beautify or reformat minified CSS
- ✓Minify and see the bytes saved
- ✓Handles modern CSS features
- ✓100% private — runs in your browser
Beautify or Minify CSS
Paste raw, generated or minified CSS and it's beautified with each rule and declaration on its own line. Click Minify to strip comments and collapse whitespace for production — the tool reports exactly how many bytes you saved. All processing is local.
How to Format CSS Online
- 1Paste raw, generated or minified CSS into the input panel
- 2Choose 2, 4 or 8-space indentation
- 3Click Format to beautify, or Minify to compress it
- 4Copy or download the result
Example
Input (minified, from a build tool):
.card{padding:16px;border-radius:8px}.card h2{font-size:1.25rem;margin:0 0 8px}@media (max-width:640px){.card{padding:12px}}Output (formatted, 2 spaces):
.card {
padding: 16px;
border-radius: 8px;
}
.card h2 {
font-size: 1.25rem;
margin: 0 0 8px;
}
@media (max-width: 640px) {
.card {
padding: 12px;
}
}Features
Rule-per-line formatting
Every selector and declaration gets its own line, so diffs stay readable.
Configurable indent size
Switch between 2, 4 or 8 spaces to match your project's style.
Handles modern CSS
Native nesting, custom properties (--var) and media/container queries format correctly.
Minify with bytes saved
Strip comments and whitespace for production, and see exactly how much smaller the output is.
Preserves values exactly
Colors, units, !important and vendor prefixes are never altered — only whitespace changes.
100% private
Formatting and minifying run entirely in your browser — your styles are never uploaded.
Who Uses This
- ▸Frontend developers — reformat CSS generated by a build tool, PostCSS plugin, or copied from browser dev tools.
- ▸Code reviewers — expand a minified stylesheet back into readable rules to review a diff or track down a bug.
- ▸Documentation authors — clean up CSS snippets before pasting them into a style guide or blog post.
- ▸Teams standardizing style — reformat everyone's CSS to the same indentation before a merge.