piapia123
en

CSS Formatter & Minifier

Formatting

Everything runs locally in your browser — nothing is uploaded

Input
Output

Expand a minified stylesheet into something readable: every declaration gets its own line, selector lists break at the commas, @media blocks and nested rules indent a level deeper, and empty rules collapse onto one line. Minify mode does the reverse, removing whitespace only at structural positions and dropping the redundant semicolon before a closing brace. Spaces that carry meaning, such as in margin: 0 auto or before the colon in a :hover, are left alone because removing them changes what the rule means.

Features

  • Expands rule blocks: selector on its own line, one declaration per line, closing brace aligned with the selector
  • Breaks selector lists at commas while commas inside values (font stacks, rgba()) stay put
  • Collapses empty rules onto a single line, as in a {}
  • Normalises declaration colons to color: red while leaving pseudo-class colons such as &:hover and a:hover alone
  • Structural characters inside strings, comments and url() are ignored, so content: "}" and data URIs cannot break a rule apart
  • Data URIs are treated as one unit, so the semicolon inside one never splits a declaration in two
  • Minify removes structural whitespace, the redundant semicolon before } and ordinary comments
  • Keeps copyright comments written as /*! ... */
  • No syntax validation: unbalanced braces are indented as best they can rather than rejected

How to use

  1. Paste your CSS into the input box
  2. Pick the mode and indentation
  3. Press Ctrl/⌘ + Enter or click Run
  4. Click Copy to take the result

FAQ

Does minifying remove the space in margin: 0 auto?
No. Only whitespace around { } ; , and : is removed. "0 auto" is two values, and dropping a space would turn it into an invalid declaration, so those spaces are always kept.
Will a :hover be minified into a:hover?
No. The space before the colon is a descendant combinator, and a :hover and a:hover are two entirely different rules. Minify keeps it.
Does it handle CSS nesting?
Yes. Pseudo-class colons and declaration colons are told apart by what follows them: only a colon followed by ; or } is treated as a declaration colon, so a selector is never rewritten into the invalid &: hover.
Is my CSS uploaded anywhere?
No. Everything runs in your browser memory, the page makes no network requests, and it works offline.

Related tools

JavaScript Beautifier

Formatting

Beautify minified JavaScript by re-indenting on braces and semicolons, with strings and comments kept verbatim. Indentation only, nothing uploaded.

HTML Formatter

Formatting

Format HTML online by tag level, keeping text and inline tags on one line and script or pre content untouched. Runs locally, with nothing uploaded.

Color Converter

Conversion

Convert a colour between HEX, RGB, HSL and HSV, and check whether text and background clear the WCAG AA or AAA contrast ratio, all locally.

JSON Formatter

Formatting

Format, minify and validate JSON, pinpointing syntax errors to an exact line and column. Optional key sorting; runs in your browser.

JSON to Code

Formatting

Turn JSON into TypeScript interfaces, Go structs, Java classes or Rust structs, with missing keys marked optional. Runs locally in your browser.

SQL Formatter

Formatting

Format SQL online: one clause per line, consistent keyword case, subqueries indented deeper. Minify strips comments and extra whitespace, all locally.

← Back to all tools