Skip to content
HandfulTools

CSS Formatter & Minifier

Expand minified CSS into one declaration per line to read or debug it, or minify your stylesheet to reduce its size for production.

Runs in your browser

Loading…

How to use

  1. Paste your CSS.
  2. Choose Beautify or Minify.
  3. Copy the result.

How it works

The stylesheet is tokenized so that quoted strings (such as content: "a;b") and comments are never altered. Beautify puts each selector, declaration and closing brace on its own line with consistent indentation, including nested rules inside @media.

Minify removes comments (except /*! licence comments), whitespace and the last semicolon in each block. Spaces that change meaning, such as those around + and - in calc(), are kept.

Examples

Minified framework
.a{color:red}.b:hover{color:blue} becomes two readable rules with indented declarations.

Common uses

  • Reading third-party or minified CSS
  • Reducing stylesheet size
  • Normalising CSS before code review

Privacy & security

This tool runs entirely in your browser. Your files and text are never uploaded to our servers — processing happens on your device and results are created locally. How each tool handles files

Frequently asked questions

Is this a replacement for a build tool?

For production sites, build tools like Lightning CSS or cssnano do deeper optimisation. This tool is ideal for quick, one-off formatting.

Does it support SCSS or Less?

Basic nesting formats correctly, but preprocessor-specific syntax such as mixins isn't guaranteed.

Last updated: