Typical reasons to reach for it
Most CSS you did not write yourself arrives minified: a third-party widget overriding your styles, a production bundle you are debugging without source maps, a theme from a CMS marketplace. DevTools can pretty-print one file, but it is awkward to copy from, compare or search. Going the other way, a small site without a build step still benefits from minified CSS.
Beautifying uses Prettier’s CSS printer (built on PostCSS), so the result matches Prettier in your editor: one declaration per line, a space after each colon, lowercase hex colours left as you wrote them, and consistent blank lines between rules. Modern syntax is understood, including native CSS nesting with &, @layer, @container, @supports, :has(), custom properties and multi-line grid-template-areas strings.
Using the tool
- Paste the stylesheet or drop a
.cssfile. - Press Ctrl/Cmd+Enter to beautify, or Ctrl/Cmd+Shift+M to minify.
- Press Ctrl/Cmd+Shift+C to copy the result. The command palette (Ctrl/Cmd+K) has everything else.
CSS has no format-specific switches here; the shared indent (2 spaces, 4 spaces or tabs) and line width settings control the layout. Line width matters for long selector lists and values such as font-family stacks, transition lists and gradients, which wrap when they exceed it.
Stylesheets rarely contain secrets, but internal hostnames and asset URLs do appear in them. Either way, the CSS is processed locally rather than on a server.
What minifying does
Minification uses csso in its safe mode, without structural optimisation. In practice that means:
- Whitespace and all comments are removed. This includes
/*! ... */license banners, so add them back if your license requires it. - Values are shortened when the result is equivalent:
#ffffffbecomes#fff,rgb(255, 0, 0)becomesred,0pxbecomes0,0.50embecomes.5emandfont-weight: boldbecomes700. - Rules are not merged or reordered. Restructuring can change the cascade when the same selector appears in different places, so duplicate rules stay where they are.
Input is beautified first as a syntax check, so a stylesheet with an unclosed block is reported instead of being minified into something broken.
Not a linter
The formatter checks structure: matching braces, closed strings and brackets, valid at-rule syntax. It does not know which properties or values exist. colr: red or display: flexbox format without complaint, exactly as browsers silently ignore them. Run Stylelint for property and value checks.
Preprocessor syntax is a different matter. Plain CSS cannot contain $variables, @mixin or .mixin(); calls. For those files use the SCSS formatter or the Less formatter, which parse each language properly. CSS inside an HTML <style> block is formatted by the HTML formatter along with the markup.
Examples
Minified component stylesheet
Custom properties, :has() and the media query are expanded to one declaration per line.
:root{--brand:#4f46e5;--radius:10px;--shadow:0 1px 2px rgb(0 0 0/.06),0 4px 12px rgb(0 0 0/.08)}.product-card{display:grid;grid-template-rows:auto 1fr auto;gap:.75rem;padding:1rem;border-radius:var(--radius);box-shadow:var(--shadow);background:#fff}.product-card__price{font:600 1.25rem/1.2 Inter,system-ui,sans-serif;color:var(--brand)}.product-card:has(.badge--sale) .product-card__price{color:#dc2626}@media (prefers-reduced-motion:no-preference){.product-card{transition:transform .2s ease,box-shadow .2s ease}.product-card:hover{transform:translateY(-2px)}}:root {
--brand: #4f46e5;
--radius: 10px;
--shadow: 0 1px 2px rgb(0 0 0/0.06), 0 4px 12px rgb(0 0 0/0.08);
}
.product-card {
display: grid;
grid-template-rows: auto 1fr auto;
gap: 0.75rem;
padding: 1rem;
border-radius: var(--radius);
box-shadow: var(--shadow);
background: #fff;
}
.product-card__price {
font:
600 1.25rem/1.2 Inter,
system-ui,
sans-serif;
color: var(--brand);
}
.product-card:has(.badge--sale) .product-card__price {
color: #dc2626;
}
@media (prefers-reduced-motion: no-preference) {
.product-card {
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.product-card:hover {
transform: translateY(-2px);
}
}
Native nesting with cascade layers
Nested rules and the @container block inside the layer are indented four spaces per level.
@layer reset,components;@layer components{.checkout-form{display:flex;flex-direction:column;gap:1rem;& label{font-weight:500}& input:is(:focus-visible,:hover){outline:2px solid var(--brand);outline-offset:2px}@container (min-width:40rem){flex-direction:row;align-items:end}}}@layer reset,components;
@layer components {
.checkout-form {
display: flex;
flex-direction: column;
gap: 1rem;
& label {
font-weight: 500;
}
& input:is(:focus-visible, :hover) {
outline: 2px solid var(--brand);
outline-offset: 2px;
}
@container (min-width:40rem) {
flex-direction: row;
align-items: end;
}
}
}
Readable CSS minified for a static site
The comment and whitespace disappear, and colours, zero lengths and font-weight are written in their shortest equivalent form.
/* Site header */
.site-header {
position: sticky;
top: 0px;
background-color: #ffffff;
border-bottom: 1px solid rgb(229, 231, 235);
}
.site-header .logo {
font-weight: bold;
letter-spacing: 0.50px;
}
.site-header{position:sticky;top:0;background-color:#fff;border-bottom:1px solid #e5e7eb}.site-header .logo{font-weight:700;letter-spacing:.5px}Common errors and how to fix them
| Error | Cause | Fix |
|---|---|---|
CssSyntaxError: Unclosed blockExplained | A rule or at-rule opened with { never gets its }, often at the end of a long @media block. | Add the missing closing brace. The position points at the selector whose block is still open. |
CssSyntaxError: Unexpected }Explained | There is one closing brace too many, typically left over after deleting a rule. | Remove the extra } at the reported position. |
CssSyntaxError: Unclosed string | A quoted value such as content: "→ or a font-family name is missing its closing quote. | Close the quote on the same line; CSS strings cannot span lines without a backslash. |
CssSyntaxError: Unclosed bracket | A url(, var( or calc( call is missing its closing parenthesis. | Add the ) after the argument; in nested calc() expressions, count the brackets from the innermost one out. |
Frequently asked questions
How do I unminify CSS?
Paste the minified stylesheet here and press Ctrl/Cmd+Enter. Every rule is expanded to one declaration per line; comments that the minifier removed cannot be recovered, but the structure is fully readable.
Is minified CSS safe to use in production?
Yes. The minifier only removes whitespace and comments and shortens values to exact equivalents; it does not merge or reorder rules, so the cascade is unchanged.
Does it support CSS nesting?
Yes. Native nesting with & and nested selectors, as supported by current Chrome, Firefox and Safari, is parsed and indented. Sass-only features such as @extend or $variables need the SCSS formatter.
How do I format CSS in VS Code?
Open the file and run Format Document (Shift+Alt+F on Windows, Shift+Option+F on macOS). Installing the Prettier extension gives the same output as this page.
Is my stylesheet sent anywhere?
No. Formatting and minifying run in your browser tab.