CSS formatter

Code formatters

Beautify and minify CSS, SCSS and Less.

Updated May 17, 2026

Input

Options

Indent

Output

.card {
  padding: 1rem;
  border-radius: 8px;
  background: #fff;
}
.card h2 {
  font-size: 1.25rem;
  color: #111;
}
@media (max-width:640px) {
  .card {
    padding: .75rem;
  }
}

Quick start

How to format or minify CSS

Paste CSS, pick pretty or minify, copy the result. All in your browser.

Step 1

Paste CSS

Drop the CSS you want to format — a snippet, a whole stylesheet, or an inline style block.
Step 2

Pretty or minify

Pretty mode indents and splits declarations onto separate lines. Minify strips whitespace and shows you the byte savings.
Step 3

Copy result

One-click copy. Drop the output into your stylesheet, design tokens file, or <style> tag.

In-depth guide

CSS formatter — pretty-print and minify

Reformat any CSS into clean indented blocks with one declaration per line, or strip every unneeded whitespace for production. Handles nested at-rules (@media, @keyframes, @supports), preserves comments and vendor prefixes. No server round-trip.

What the formatter does

One selector per rule, one declaration per line.
Consistent spacing around : (single space after, none before).
Configurable indent (2 / 4 spaces typical).
Nested blocks (media queries, keyframes, supports) indented further.
Comments and at-rules kept intact.

Minify savings

Minification removes comments, collapses whitespace around { } : ; , > + ~, drops the last ; before }. Typical savings on hand-written CSS: 15-30%. Modern build tools (Vite, Tailwind v4, Lightning CSS) already minify on build — use this tool for ad-hoc snippets, inline styles, or pre-flight comparison.

What it doesn't do

No validation — typos like colr: red pass through.
No vendor-prefix expansion — write your own prefixes or use Autoprefixer in your build.
No CSS Nesting normalisation — modern &-style nesting is preserved as-written, not desugared.
No selector merging — two rules with identical selectors stay separate. cssnano and other production minifiers do this.

Frequently asked questions

Does this tool send my CSS anywhere?

No. Formatting and minification run in your browser. Useful for theme CSS, design-system tokens or anything you don't want to upload.

Is this a full CSS parser?

No — it's a token-based pretty-printer. It tracks braces, splits selectors and declarations, indents by depth. Comments and at-rules pass through. It does not validate property names or values.

Does it handle @media, @keyframes, @supports?

Yes — nested at-rules indent like any other block. @keyframes step blocks (0%, 100%, etc.) are formatted as nested declarations.

What does minify strip?

Comments, whitespace around punctuation, trailing semicolons before }, and runs of whitespace. We don't shorten color values, drop quoted-font-name quotes or merge selectors — for that, use a real minifier like cssnano.

Does it preserve vendor prefixes?

Yes — -webkit-, -moz-, -ms- prefixed properties are kept untouched.

What about CSS-in-JS or SCSS?

Not supported — strict CSS only. Pre-compile SCSS / LESS first; for tagged template literals strip the template syntax before pasting.

Keep exploring