CSS Beautifier & Formatter Online

Q: How do I unminify a .min.css file online?

Paste your compressed .min.css code into the Input CSS box on the left. The tool automatically parses selectors, declarations, @media queries, and @keyframes into cleanly indented multi-line CSS in real time.

Q: Can I also minify CSS with this tool?

Yes. Click the 'Minify CSS' button (or select 'Minify (Single-Line .min.css)' in the settings panel) to strip comments, whitespace, and trailing semicolons and compress color values into a compact production stylesheet.

Instantly format, unminify, and organize messy or compressed CSS stylesheets in real time. Our state-machine CSS formatter accurately indents nested @media queries, @keyframes, CSS variables (--var), https:// URLs, and inline SVG data URIs—and includes a one-click CSS Minifier when you are ready to ship to production.

Input CSS

Quick Presets:

Input: 0 chars

Output: 0 chars

Rules: 0

Lines: 0

Formatted CSS Result

Settings

Output Mode

Beautify / Unminify CSS Expands rules and nested blocks with clean indentation.

Minify (Single-Line .min.css) Strips comments, extra spaces, and line breaks for production.

Indentation & Layout

Indentation Size

Use tabs instead of spaces

Opening Brace Position

One selector per line (.a, .b) Splits comma-separated selectors onto individual lines.

Add blank line between rules

Cleanup & Optimization

Sort properties alphabetically (A–Z) Orders declarations inside each rule block alphabetically.

Remove CSS comments (/* ... */)

Compress color values Converts rgb(255, 0, 0) → #f00 and #ffffff → #fff without altering surrounding values.

How to Beautify & Unminify CSS Online

Paste Your CSS: Paste your compressed .min.css or messy stylesheet into the Input CSS editor on the left, or click Load Sample to test nested @media queries, variables, and URLs.
Choose a Preset or Customize Settings: Pick 2 Spaces, 4 Spaces, Clean & Sort A–Z, or Minify (.min.css) from the Quick Presets bar, or adjust indentation, brace placement, selector splitting, and color compression on the right.
Inspect Live Statistics: Watch the Input, Output, Rules, and Lines counters update immediately as you type or toggle options.
Copy or Download: Click Copy to Clipboard or Download .css to save your formatted stylesheet as styles.beautified.css (or styles.min.css in Minify mode).

CSS Formatting & Optimization Options Explained

Option	What It Does	Before	After
Unminify & Indent	Expands single-line rules and nested `@media` / `@keyframes` blocks with 2, 4, or 8 spaces or tabs.	`@media(max-width:768px){.box{width:100%}}`	`@media (max-width: 768px) { .box { width: 100%; } }`
One Selector Per Line	Splits comma-separated selector lists onto individual lines while ignoring commas inside `:is()` or `:not()`.	`.btn, .card, .modal { ... }`	`.btn, .card, .modal { ... }`
Compress Color Values	Converts `rgb()` and 6-digit hex codes to 3-digit hex codes inside any declaration value while preserving surrounding tokens.	`border: 1px solid rgb(255, 0, 0);`	`border: 1px solid #f00;`
Sort Properties (A–Z)	Alphabetizes declarations inside each block to standardize code reviews and reveal duplicate properties.	`z-index: 5; display: flex; align-items: center;`	`align-items: center; display: flex; z-index: 5;`

Why Use a State-Machine CSS Beautifier?

Many simple online CSS formatters split code on every colon (:), semicolon (;), or brace (}). That approach breaks down as soon as your stylesheet includes modern CSS features such as:

Nested At-Rules & Native CSS Nesting: @media queries, @supports feature queries, @keyframes animations, @layer blocks, and nested child selectors require multi-level indentation tracking.
External URLs & Inline SVG Data URIs: Properties like background: url("https://...") or url("data:image/svg+xml;utf8,<svg...>") contain colons and semicolons that must never be split as CSS property delimiters.
Pseudo-Element Content Strings: Declarations like content: "Item: 1; Status: OK" keep their exact inner characters and whitespace intact.
W3C-Accurate Color Shortening: Named colors are only shortened when the hex equivalent is strictly shorter and identical in the CSS specification (for example, white → #fff and black → #000, while leaving green as green since #008000 is longer and #0f0 is actually lime).

Frequently Asked Questions

How do I unminify a .min.css file online?

Paste your compressed .min.css code into the Input CSS box on the left. The tool automatically parses selectors, declarations, @media queries, and @keyframes into cleanly indented multi-line CSS in real time.

Does this CSS beautifier support @media queries, @keyframes, and data: URIs?

Yes. Unlike simple split-based formatters, this tool uses a state-machine CSS parser that preserves nested blocks (@media, @supports, @keyframes, @layer, and native CSS nesting) as well as colons and semicolons inside url("https://..."), data:image/svg+xml URIs, and quoted content strings.

Is it safe to sort CSS properties alphabetically?

Alphabetical sorting makes large rules easier to scan and helps spot duplicate declarations. However, if a rule relies on a shorthand property followed by a more specific override (or vice versa, such as background-color vs. background), changing declaration order can alter which property wins. Enable sorting when your rules don't depend on shorthand override order.

Can I also minify CSS with this tool?

Yes. Click the Minify CSS button (or select Minify (Single-Line .min.css) in the settings panel) to strip comments, whitespace, and trailing semicolons and compress color values into a compact production stylesheet.

Is my CSS code uploaded to any server?

No. All CSS formatting and minification runs 100% locally in your browser using JavaScript. Your stylesheets never leave your computer.

How to Beautify & Unminify CSS Online

CSS Formatting & Optimization Options Explained

Why Use a State-Machine CSS Beautifier?

Frequently Asked Questions

Related Developer & Code Formatting Tools