Tools
CSS Beautifier and Minifier
Paste any CSS stylesheet and either pretty-print it with your chosen indent or shrink it to a single line. Everything runs in your browser — your CSS never leaves the page.
About the CSS beautifier and minifier
This tool has two independent, one-click operations on the CSS you paste in: Beautify pretty-prints it with consistent indentation, one declaration per line, and a space before each opening brace; Minify strips comments and collapses everything to the smallest whitespace it can safely remove. Both run entirely in your browser — the CSS never leaves the page, so pasting a work-in-progress stylesheet here doesn't send it anywhere. Beautify's indent width is configurable from 1 to 8 spaces; Minify has no options, because it's a single, predictable pass.
Beautify calls Prettier 3's standalone build in the browser (prettier/standalone plus its postcss plugin) — the same parser Prettier uses for CSS, LESS, and SCSS — so the output matches what Prettier produces from the command line or an editor plugin. Minify deliberately isn't Prettier or a full minifier like clean-css: it's a regex pass (minifyCss) that strips /* ... */ comments, collapses whitespace runs to a single space, and removes space around { } : ; , > + ~. It skips selector merging and value shortening on purpose, and special-cases url(data:...) so base64-encoded images and inline SVGs aren't corrupted by the whitespace pass.
Reach for Beautify when you have minified or inconsistently formatted CSS — copied from browser devtools, a bundler's output, or a teammate's one-line rule — and need to read or diff it; the indent field controls the output width. Reach for Minify when you need to paste CSS into a <style> tag or a size-constrained snippet without wiring up a build step. If the source has a syntax error — an unclosed brace, a stray token — Beautify surfaces Prettier's parse error (e.g. CssSyntaxError: Unclosed block) instead of guessing; Minify never throws, since it only rewrites whitespace and comments.
Examples
.card{display:flex;padding:16px;color:#333333}
.card > .title{font-weight:bold;font-size:14px}
/* Beautify output (indent 2): */
.card {
display: flex;
padding: 16px;
color: #333333;
}
.card > .title {
font-weight: bold;
font-size: 14px;
}Exact output of the Beautify button at indent width 2 (the default) — matches Prettier's CSS printer: one declaration per line, a space before {, semicolons kept.
.card {
/* card container */
display: flex;
padding: 16px;
color: #333333;
}
.card > .title {
font-weight: bold;
}
/* Minify output: */
.card{display:flex;padding:16px;color:#333333}.card>.title{font-weight:bold}Comments are stripped and whitespace collapses to one line, but selectors aren't merged and values aren't shortened — that's a deliberate limit, not a bug.
.icon {
background: url("data:image/svg+xml,<svg width='10'>a</svg>");
}
/* Minify output — whitespace inside the data: URI survives: */
.icon{background:url("data:image/svg+xml,<svg width='10'>a</svg>")}The minifier detects url(data:...), swaps it for a placeholder before collapsing whitespace, then restores it verbatim — so a base64 image or inline SVG is never corrupted, even one with literal spaces or line breaks.
Frequently asked questions
Does my CSS get uploaded anywhere when I use this tool?
No. Beautify runs Prettier's standalone build and Minify runs a local regex pass, both entirely in your browser tab. Nothing you paste is sent to a server, logged, or stored — closing the tab discards it.
Does the CSS minifier merge selectors or shorten hex colors like a build-tool minifier would?
No. This minifier only strips comments and collapses whitespace and separators — it doesn't merge duplicate selectors, shorten #ffffff to #fff, or touch values at all. For maximum compression, use a dedicated minifier like clean-css in a build pipeline.
Why did Beautify show an error instead of formatting my CSS?
Beautify parses your CSS with Prettier before it can format it, so invalid CSS — an unclosed brace, a stray character — throws a parse error instead of being silently guessed at. The message (e.g. CssSyntaxError: Unclosed block) includes a line and column number pointing at the problem.
Will minifying break a background image written as url(data:...) or an inline SVG?
No. The minifier detects url(data:...) before collapsing whitespace, sets it aside, and splices it back in unchanged afterward — so a base64 image or an inline SVG with literal spaces or line breaks in its markup comes out exactly as it went in.
What indent size should I use for Beautify?
2 spaces is this tool's default and the most common convention in CSS style guides. The field next to Beautify accepts any whole number from 1 to 8, so change it before clicking Beautify if your project uses a different indent size (4 spaces is the next most common).