CSS Formatter

CSS formatter: beautify and minify stylesheets online

A CSS formatter expands minified rules into indented blocks so you can read selectors, media queries, and custom properties at a glance. Minify mode removes comments and extra spaces when you need a compact blob for a critical CSS inline test or a quick embed.

Use this for styles pasted from DevTools, legacy CMS exports, or teammate handoffs—not as a replacement for PostCSS, Sass, or your production bundler.

How to use this converter

1. Paste CSS—from a single rule to an entire stylesheet.
2. Choose indent size and click Format to expand nested rules.
3. Click Minify to compress for inline experiments or size checks.
4. Copy the output into your editor; run your usual linter before committing.

Before and after examples

Selectors, nesting, and at-rules

Formatted CSS groups declarations under each selector with consistent indentation. `@media`, `@supports`, and `@keyframes` blocks nest visually so you can spot unclosed braces quickly. Modern nested syntax from preprocessors may paste as flat CSS—formatting still helps even if nesting was already compiled.

Custom properties (`--token`) and `calc()` expressions are preserved verbatim; the formatter does not evaluate math or resolve variables.

What minify removes—and what it keeps

Minify strips most comments and collapses whitespace between tokens. License comments required for third-party libraries may be removed—keep originals in source control. Minified CSS is harder to debug in DevTools; beautify again before editing if you inherited a one-line file from a CDN.

Typical workflow with HTML and SCSS

Extract a `<style>` block from HTML, format here, edit, then paste back. For SCSS with variables and mixins, use the SCSS formatter page instead—this tool targets plain CSS syntax. When comparing two theme files, formatted output makes duplicate selectors obvious.

Frequently asked questions