JSONFormatting.org

CSS Tool

CSS Formatter & Minifier

Beautify CSS into readable rules, or minify it down for production — instantly.

Home › Tools › CSS Formatter & Minifier
Output
Output will appear here

Format or minify CSS instantly

Paste any CSS — a stylesheet exported from a design tool, a minified production file you need to read, or hand-written styles you want to clean up — and either beautify it into consistently indented, readable rules, or minify it down to the smallest size for production.

What each mode does

  • Format: Reindents every rule with consistent 2-space nesting, puts each declaration on its own line, and normalizes spacing after colons (color:red becomes color: red).
  • Minify: Strips comments and all non-essential whitespace, producing the smallest possible file size while keeping the CSS functionally identical.

Both modes correctly handle nested at-rules like @media queries.

Typical use cases

  • Debugging a minified stylesheet: Paste a production CSS file to make it readable again before tracking down a style issue.
  • Cleaning up exported CSS: Design tools often export CSS with inconsistent formatting; beautify it before committing to your codebase.
  • Shrinking file size: Minify hand-written CSS before deploying, when you're not running a full build pipeline.

Frequently Asked Questions

Comments are stripped in both modes currently, since they're removed during parsing. If you need to preserve specific comments, keep a copy of the original alongside the formatted output.
No — it reformats or minifies whatever you paste, but doesn't check for invalid property names or values. For that, your browser's DevTools or a dedicated CSS linter is a better fit.
Yes, both formatting and minifying correctly handle nested at-rules like @media, indenting or compacting their contents along with the rest of the stylesheet.
No, all formatting and minifying happens locally in your browser.