Does formatting change which styles win?

No. Specificity comes from the selectors and the cascade from source order, and formatting changes neither. The same rules apply in the same order, only laid out differently.

Does it handle media queries and nesting?

Yes. At-rules with a block — media, supports, layer, container — are indented like any other nesting level, as is native CSS nesting.

What about custom properties?

Custom property values are preserved as written. Their syntax is deliberately permissive — a value can be almost any token sequence — so reformatting the inside of one risks changing its meaning.

CSS Formatter

Turn a minified stylesheet back into something you can read. Each rule gets its own block, each declaration its own line, and nested at-rules like media and supports queries are indented to match. Useful for inspecting a compiled bundle or tidying a stylesheet that has been edited by several hands.

Developer Tools

CSS to format

Indentation

Wrap lines at

Formatted CSS

.card {
  padding: 1rem;
  border-radius: 8px;
  background: #fff
}

.card h2 {
  margin: 0 0 .5rem;
  font-size: 1.25rem
}

Input: 1 lines; 97 characters
Output: 11 lines; 124 characters
Indent: 2 spaces

Formatting changes whitespace only — no code is rewritten, reordered, or removed. This is not a minifier: shrinking CSS safely means parsing it properly, which belongs in your build step.

Private by default

This tool runs entirely in your browser. Your data is never uploaded to a server.

How it works

How the rules are laid out

Every selector block opens on its own line, each declaration sits on one line ending in a semicolon, and nested at-rules add an indent level. Comments stay where they are rather than being moved to the nearest declaration.

Specificity and the cascade are untouched — formatting cannot change which declaration wins.
Custom property values are left exactly as written, because their grammar allows nearly any token sequence.
The final declaration keeps its semicolon added, which is optional in CSS but safer when rules are later reordered.
This does not minify. Removing CSS whitespace safely still needs a real parser, since whitespace is significant inside strings, url(), and calc().

For reference

At-rules that take a block

At-rule	What it wraps
@media	Rules for a viewport or device condition
@supports	Rules applied only when a feature is understood
@layer	A named cascade layer
@container	Rules based on an ancestor's size
@keyframes	Animation steps, each a percentage or from/to
@font-face	A single font's descriptors

@import and @charset take no block, must come first in the file, and are left on their own line.

How to use

4 clear steps.

Paste the CSS, minified or not.
Pick your indentation style.
Read the expanded rules in the output.
Copy the result.

Good to know

Frequently asked questions

Does formatting change which styles win?: No. Specificity comes from the selectors and the cascade from source order, and formatting changes neither. The same rules apply in the same order, only laid out differently.
Does it handle media queries and nesting?: Yes. At-rules with a block — media, supports, layer, container — are indented like any other nesting level, as is native CSS nesting.
What about custom properties?: Custom property values are preserved as written. Their syntax is deliberately permissive — a value can be almost any token sequence — so reformatting the inside of one risks changing its meaning.