Super Boring Tools

Search tools

Find a tool by name or what it does.

CSS Beautifier & Minifier

Beautify minified CSS into readable rules, or strip comments and whitespace, with indent control and a size readout.

Formatted live as you type. Styles never leave your browser.

Output

Indent

Rule spacing

How to beautify or minify CSS online

  1. Paste your CSS

    Drop a stylesheet or a fragment into the input. It is reformatted automatically a moment after you stop typing.

  2. Pick a mode

    Choose Beautify for indented, readable output with 2 or 4 space indentation, or Minify to strip comments and whitespace.

  3. Copy the result

    The formatted CSS appears in the output area, with a size readout in minify mode, and Copy CSS puts it on your clipboard.

Why use this tool

Beautify and minify in one tool

Switch between indented, readable output and compact whitespace-free output on the same page, from the same pasted input.

Indent and rule spacing control

Choose 2 or 4 space indentation and toggle a blank line between rules so the output matches your style guide.

Size savings readout

Minify mode shows the size before and after plus the percentage saved, so you know exactly what the smaller file is worth.

Honest minification

Minifying removes comments and whitespace only. Values are never rewritten and rules are never merged, so the output is your CSS, just smaller.

Lenient with broken input

Malformed CSS is reformatted best effort instead of rejected, so a stray brace or a typo does not stop you from tidying the rest.

Styles stay on your device

Formatting runs in your browser. Selectors, colors, and everything else in your stylesheet are never uploaded.

About this tool

This CSS beautifier takes a stylesheet that ships as one long line and reprints it as readable rules, with consistent indentation, one declaration per line, and an optional blank line between rules. The usual candidates are production CSS copied out of browser devtools, framework output you suddenly need to read, and files that have been edited by enough people to carry three indentation styles at once. Formatting runs automatically a moment after you stop typing, so unminifying a stylesheet is paste, wait a beat, copy.

Minify mode goes the other way, and it is deliberately basic. It strips comments, collapses whitespace, and drops redundant semicolons, then reports the size before and after with the percentage saved. Comments that start with /*! are kept, since those usually carry license text. What it never does is rewrite values, shorten colors, or merge rules. If you want that level of compression, the minifier in your bundler is the right tool; this one is for quickly shrinking a snippet or seeing what whitespace alone costs.

Both modes are lenient. A stylesheet with a missing brace or a typo is reformatted best effort rather than rejected, which is what you want when the broken file is exactly the one you are trying to read. Everything runs in your browser, so client work and unreleased styles never leave your device. For the rest of a messy payload, the JSON formatter and SQL formatter do the same job for their formats, and the box shadow generator helps when you are writing new CSS rather than cleaning up old CSS.

Frequently asked questions

What does minify mode actually remove?
Comments, whitespace, and redundant semicolons. Comments that start with /*! are kept because they usually carry license text. Values are never rewritten, colors are never shortened, and rules are never merged, so the output is your CSS minus the padding. For build-grade compression, use the minifier in your bundler.
Can I control how the beautified output looks?
Yes. Indentation is 2 or 4 spaces, and a toggle controls whether a blank line separates rules. Declarations are always printed one per line, which is what makes minified CSS readable again.
What happens if my CSS is broken?
It is reformatted best effort. This is a formatter, not a validator, so a missing brace or an unknown property does not produce an error; the output is simply formatted as well as the input allows. Do not read a clean result as proof the stylesheet is valid.
Is my CSS uploaded anywhere?
No. Formatting runs entirely in your browser and the stylesheet never leaves your device. That matters when the CSS belongs to a client project or an unreleased product.
Is there a limit on stylesheet size?
No fixed limit. Processing happens in your browser tab, so very large files are bounded by your device memory rather than an upload cap. The output area scrolls instead of stretching the page.

Related tools