Skip to content
TypeParser
All tools

CSS Formatter

Format, minify, and sort CSS properties.

beats cssbeautify.com edge: Property sort + minifier in one tool
input.css
output
mode indent
paste CSS
Guide

About CSS Formatter

Format CSS with consistent indentation, minify it for production with selector compaction and zero-unit cleanup, or sort declarations alphabetically per rule. Comments and at-rules (<code>@media</code>, <code>@keyframes</code>, <code>@supports</code>) preserve their nesting structure cleanly.

What CSS formatting addresses

CSS files grow. The first declaration is clean; the 500th is a mess of squished selectors, inconsistent spacing, and comments from three different developers. A formatter resets the surface so the structure is readable again.

The non-trivial pieces:

  • Selector grouping — a, .b, #c reflows when the line gets long
  • Nested rules — @media, @keyframes, @supports get proper indent
  • Property alignment — colons line up cleanly per rule
  • Comments — preserved at their declared depth
  • At-rule arguments — multi-line breakpoint lists handled

Common workflows

Audit a stylesheet for ordering bugs. Sort declarations alphabetically. If the visual changes, you had order-dependent CSS — refactor with explicit specificity.

Diff two CSS files. Format both, drop into the Diff Checker. Comment-only and whitespace-only differences vanish; real changes surface.

Prepare CSS for production. Format → review → minify. The two-pass workflow catches mistakes before they compress.

Convert utility-first to plain CSS. Use CSS to Tailwind to extract utilities, or paste plain CSS to format from a Tailwind extraction.

Why local

CSS rarely contains secrets, but pasting your full stylesheet into a remote formatter still surfaces internal class names, layout choices, and brand colors that may be sensitive pre-launch. Ours runs in the browser, no upload, no log.

Frequently asked questions

What does "minify" actually remove?
Whitespace between tokens, comments, last semicolons in rule blocks, unnecessary unit prefixes (0px → 0), duplicated whitespace inside selectors. Selector groups (a, b) collapse to a,b.
Will sorting properties break my CSS?
No, except for legitimate cases where order is semantic — e.g. shorthand-then-longhand (border: 1px solid; border-color: red). Toggle sorting off if you rely on declaration order.
Does it support SCSS / LESS?
Plain CSS only. SCSS-specific syntax (@mixin, @include, $vars) parses but may be reformatted in ways your preprocessor disagrees with. Use a preprocessor-aware tool for those.
How does it handle <code>@media</code> queries?
Nested rules indent one level. Comma-separated breakpoint lists stay on one line unless they exceed 80 columns, in which case each breakpoint gets its own line.
What about CSS-in-JS or Tailwind utilities?
Tailwind class strings inside HTML are not CSS; they remain unchanged. CSS-in-JS template literals can be pasted in and formatted as plain CSS.
Will it minify variables?
No. CSS custom properties (--color-accent) keep their names. Renaming would require knowing every usage in your stylesheet — a job for a real bundler.

Related tools

Last updated: 2025-01-15