CSS Beautifier & Minifier

Format or minify CSS, SCSS and LESS with precise errors and size stats.

Runs locally · nothing uploaded
Input
Output 
What it does
Turn a minified stylesheet or a messy SCSS partial into readable code with one declaration per line, or shrink a stylesheet for production. The output updates as you type.
Features
  • CSS, SCSS and LESS: nesting, variables, mixins, maps, @use, guards and #{} / @{} interpolation are understood.
  • Prettier formatting with 2 spaces, 4 spaces or tabs, a print width and single or double quotes.
  • Minify removes comments except /*! ... */ license comments, and whitespace wherever it can’t matter: around { } ; ,, after : and (, before !important, and around the > + ~ combinators in selectors. The last semicolon of each block goes too. Everything else is copied unchanged, so strings, url() values, escapes such as .md\:flex, calc(1px + 2px) and descendant selectors like .a :hover keep their meaning. In SCSS and LESS, // line comments are removed as well.
  • Precise errors: an unclosed block, a missing quote or a stray } is reported with its line and column, a snippet with a caret and a Go to error button.
  • Size before and after, line counts and timing. Opening a .scss or .less file switches the language automatically.
How to use it
  1. Paste a stylesheet, open a file or drop one onto the input. Example loads a sample.
  2. Pick the language, then Format or Minify.
  3. Copy or download the result. Ctrl+Enter runs immediately.
The minifier does not merge rules, shorten colors or rewrite values; for that level of optimization use a build tool such as cssnano or Lightning CSS. Minified SCSS and LESS are still SCSS and LESS, so compile them before shipping.
Privacy
Everything runs in your browser; only the pinned Prettier files are downloaded from a CDN. Your styles are never uploaded. The last input is kept in local storage so a refresh doesn’t lose it.