CSS formatter

Code formatters

Beautify and minify CSS, SCSS and Less.

Updated May 31, 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.

Formatting CSS cleanly

When to reach for it. Use it to reindent and sort a CSS block so it’s easy to scan and review.

When something else is better. It won’t resolve specificity wars or dead rules — those need a linter and a browser.

The pitfall to watch. Auto-formatting can reorder declarations in ways that matter for shorthand/longhand overrides — double-check cascade-sensitive blocks.

Everything runs on your device. The values you enter are processed locally in this browser tab — EpitomeTool does not send your input to a server, store it, or log it. That means you can use the tool offline once the page has loaded, and refreshing the tab wipes the slate.

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