CSS Beautifier, Minifier & Linter

All-in-one CSS toolkit — beautify messy CSS, minify for production, and lint for common mistakes (duplicate props, shorthand opportunities, invalid units). Runs 100% client-side.

Formatter Web Dev Updated Apr 24, 2026
X Facebook LinkedIn Reddit Email
How to Use
  1. Paste CSS on the left.
  2. Press Beautify for readable indentation, Minify for compact output, or Lint to check for issues.
  3. Copy the result or download with the Save button. Stats show size before / after.
CSS Input
Sample inputs
Output

What each mode does

Beautify
Indent, newlines, one prop/line
Makes minified or messy CSS readable.
Minify
Strip whitespace + comments
Preserves url()/strings; respects /*! important */ blocks.
Lint
Report common issues
Dup props, empty rules, zero units, !important, unknown @rules.
Safety
100% client-side
Your CSS never leaves the browser.

Lint rules applied

  • Empty rule — selector with no declarations.
  • Duplicate property — same property appears twice in a single rule block.
  • Unknown @-rule — unusual at-rule name (possible typo).
  • Zero with unit — 0px, 0em, 0% can usually be just 0 (saves bytes).
  • !important overuse — flagged per declaration; more than 5 in a file is a smell.
  • Missing semicolon — declaration before a } without a terminating ; (valid CSS but a common diff conflict source).
  • Unquoted font names with spaces — font-family: Helvetica Neue should be quoted.
  • Vendor-only property — -webkit- or -moz- prefix without the unprefixed version following.
  • Hex case — mix of upper / lower in the same file is flagged.
  • Trailing whitespace / BOM — stripped by Minify, reported by Lint.

About this tool

Three CSS tools for the price of one. The beautifier walks the token stream and emits one declaration per line with consistent indentation, preserving the order of properties (no reordering — that can change cascade behaviour). The minifier collapses whitespace, strips comments (except /*! … */ license/banner comments when the preserve option is on), and removes the optional final semicolon in each block.

The linter is lexical, not semantic — it doesn\'t validate CSS against a spec (that\'s what the W3C CSS Validator is for). What it does catch are the patterns that cause real maintenance pain: duplicate declarations that indicate a bad merge, !important spirals, zero lengths with units, and typo\'d at-rules. Everything runs in your browser — no server round-trip, no telemetry, no upload.

Frequently Asked Questions

How much does minification save?

Typical CSS shrinks 20–40% by stripping whitespace and comments. With gzip on top, an extra 60–80% is saved. A 50 KB file typically serves as ~7 KB after minify + gzip.

Does the linter rewrite my CSS?

No. Lint mode only reports findings (line numbers, severity). Use Beautify or Minify to transform the source.

Will it break my CSS?

The minifier is conservative — it preserves string and url() contents and does not reorder declarations. It collapses whitespace, strips comments (unless /*! */ is used), and removes optional semicolons.

Does it support modern CSS?

Yes — nested selectors, container queries, custom properties, @layer, @supports, @scope, and logical properties all pass through untouched.

Common Use Cases

Prep CSS for production

Paste your hand-written CSS, press Minify, copy the result into your build or a <style> tag.

Clean up a messy file

Press Beautify on a one-line minified file to see it laid out with consistent indentation.

Code review

Lint a PR's CSS diff to surface duplicate properties, !important overuse, and unknown units before review.

Last updated: