CSS Formatter & Beautifier
Pretty-print minified CSS with one declaration per line — purely in your browser.
What it does
Production CSS is almost always minified: selectors and declarations run together, whitespace and comments stripped. Reading it in a debugger feels like staring at a wall.
convert2's CSS mode walks the input, re-emits each selector and each declaration on its own line, indents nested rules (media queries, supports queries) and preserves the comments that do survive minification.
How to use it
- Paste your CSS into the left pane.
- Each rule block goes on its own indented block in the output.
- Media queries,
@supportsand@keyframesformat with proper nesting. - Change indent width from the top-right control.
Example
body{margin:0;font-family:sans-serif;background:#0a0d12}.btn{background:#ff5c2b;color:#fff;padding:10px 20px}@media (max-width:600px){.btn{padding:8px 14px}}body {
margin: 0;
font-family: sans-serif;
background: #0a0d12;
}
.btn {
background: #ff5c2b;
color: #fff;
padding: 10px 20px;
}
@media (max-width: 600px) {
.btn {
padding: 8px 14px;
}
}Why convert2
- Reads the tricky cases. Media queries,
@keyframes,@supports, vendor-prefixed rules — all formatted with proper depth. - Preserves comments.
/* … */blocks keep their place. - Local. Proprietary design system? Paste without worrying about it leaking to a third party.
Common use cases
- Inspecting CSS from production bundles (after
curl-ing or copying from DevTools). - Cleaning up compiled Sass/Less output before committing or reviewing.
- Reading a vendor's stylesheet to understand their token system.
- Normalising CSS snippets in documentation.
CSS Formatter specifics
- Works on plain CSS. SCSS / Less source with nested selectors won't compile through this — compile first, format the output.
- Does not minify. For minification, use a build-time tool like
csso,cssnanoor esbuild. - Does not lint or validate properties — unknown or misspelled property names pass through.
- Keeps selector order exactly as input.
Frequently asked questions
Does it handle media queries and nested rules?
Yes. Media queries, @supports and @keyframes are formatted with proper block indentation and nested selectors.
Is it safe for production stylesheets?
Yes. All formatting runs in your browser, so proprietary CSS and design-system tokens stay local.
Can it minify CSS?
No. convert2 focuses on readability. For minification, use a dedicated tool during your build.
Will it work with SCSS or Less?
Only compiled CSS output. Compile first, then format here.