Skip to main content
CaseSwitch

CSS Formatter

Paste CSS, choose Pretty or Minify, and copy the result. Pretty uses Prettier’s CSS parser for readable indentation; Minify only collapses whitespace — use your build pipeline (cssnano, Lightning CSS) for production assets. Formatting runs in this browser — nothing is uploaded.

Written by the CaseSwitch editorial team. We maintain these tools in the browser so drafts, keys, and images stay on your device.

Last reviewed: 23 July 2026

Processed locally in your browser. Nothing is sent to a server.

Paste or type text to convert. Output stays empty until there is input.

Character count: 0 · Word count: 0 · Line count: 0

Examples

Minified rule

Input

body{margin:0;color:#000}

Output

body {
  margin: 0;
  color: #000;
}

Multiple selectors

Input

h1,h2{font-weight:700;line-height:1.2}

Output

h1,
h2 {
  font-weight: 700;
  line-height: 1.2;
}

Nested-looking media query

Input

@media (min-width:768px){main{max-width:960px}}

Output

@media (min-width: 768px) {
  main {
    max-width: 960px;
  }
}

Class with hover

Input

.btn{opacity:.9}.btn:hover{opacity:1}

Output

.btn {
  opacity: 0.9;
}
.btn:hover {
  opacity: 1;
}

Custom property

Input

:root{--gap:1rem}section{padding:var(--gap)}

Output

:root {
  --gap: 1rem;
}
section {
  padding: var(--gap);
}

How to use

  1. Paste CSS into the input panel and choose Pretty (default) or Minify.
  2. Review indented rules; fix syntax errors if formatting fails.
  3. Copy the result. For production bundles, run your project’s CSS minifier in CI.

What this tool is for

Production CSS is often one line. This page breaks rules onto lines with consistent indentation so you can inspect selectors and declarations. It is readability formatting, not cssnano optimization and not a unused-selector linter.

How it works

Pretty mode runs Prettier with the CSS parser. Minify collapses whitespace with a simple pass — it is not a production-safe compressor. The formatter should not invent new selectors; still preview mission-critical sheets in a browser after edits.

When to use it

Inspecting a production CSS file, cleaning a snippet from Stack Overflow, teaching cascade with readable examples, and preparing a small style review.

When not to use it

Not a linter for unused selectors. Nesting and `$variables` belong on the SCSS Formatter. HTML with inline styles is better extracted, or use the HTML Formatter for markup structure. Do not ship Minify output as your only production optimization step.

How it compares to related tools

SCSS Formatter understands nesting and variables. HTML Formatter is for markup. JavaScript/JSON formatters are the wrong parsers for stylesheets.

Common mistakes

Pretty-printing then minifying in the same commit without need. Breaking `content:` strings that contain braces by hand-editing after format. Expecting Autoprefixer, PurgeCSS, or cssnano behavior from the Minify toggle.

Before you commit

Auto-formatting may adjust spacing around colons and braces. Verify in a browser or with your stylelint/Prettier CI config before committing to a shared codebase. This page does not load your project’s Prettier options.

CSS vs SCSS

Plain CSS has no nesting (unless you already use native nesting your browser supports). If your snippet uses `$variables` or `&` parent selectors, switch to the SCSS Formatter. Converting CSS to SCSS nesting is a manual design choice, not something this tool does.

Frequently asked questions

Will this fix invalid CSS?+

It formats structure. Invalid properties remain invalid. Check DevTools.

Does it convert CSS to SCSS?+

No. It pretty-prints CSS. Nesting belongs in SCSS if you need it.

Is minify production-ready?+

The minify mode is a simple whitespace collapse. Use your build pipeline (cssnano, lightningcss) for production assets.

Are comments kept?+

`/* */` comments typically survive Prettier formatting. Verify license headers if you rely on them.

Is my CSS uploaded?+

No. Formatting runs in this browser.

Will declaration order change?+

Prettier does not reorder declarations for cascade optimization. Still preview if the sheet is critical.

Does this tool send my payload to CaseSwitch?+

No. Formatting, encoding, and naming conversions for this page run in your browser after load — your sample stays on the device.

Related guides

Read our original articles on this topic.

Related tools

SCSS Formatter

Cleaning a mixin you copied, reviewing a theme file fragment, preparing a style PR comment, and teaching nesting with a readable example.

HTML Formatter & Minifier

Cleaning an email HTML snippet, reviewing a CMS export, shrinking a static fragment for a demo, and making a nested list readable before you edit it by hand.

JavaScript Formatter

Reading a minified function from DevTools, cleaning a gist, sharing a snippet in a ticket, and normalizing a short example before a PR comment.

TypeScript Formatter

Cleaning a type copied from a library .d.ts, reviewing a generic-heavy snippet, preparing a PR comment, and normalizing a short TSX-ish example.

XML Formatter

Debugging an API that still speaks XML, cleaning an SVG you will edit by hand, reading a Maven pom snippet, and comparing two responses visually.