How to Minify and Beautify CSS Online (Free Tool)

You open a production stylesheet to chase a bug and find a single line that’s 80,000 characters long. Someone minified it, which was the right call for your users and the wrong one for you, right now.

Minifying shrinks CSS so pages load faster. Beautifying puts the line breaks back so people can read it. This guide covers both, and when to use each.

What minification does

Minification makes a CSS file smaller without changing how the page looks. Every minifier does the first two of these; advanced ones such as cssnano and Lightning CSS do the rest:

Removes whitespace. Spaces, tabs and line breaks are for people; the browser doesn't need them.
Removes comments. /* ... */ blocks are documentation, not instructions.
Shortens values. #ffffff becomes #fff, 0px becomes 0 and font-weight: bold becomes 700.
Collapses shorthands. margin: 10px 10px 10px 10px becomes margin: 10px.
Drops redundant declarations. In margin: 10px; margin-top: 10px, the second declaration changes nothing and can go.
Merges rules. Rules with the same selector, or the same declarations, can be combined when it's safe to do so.

How much it saves

Minification typically cuts 15 to 40% from a stylesheet. Hand-written CSS with lots of comments and whitespace sits at the high end; framework CSS that is already compact sits at the low end. Bootstrap’s stylesheet, for example, shrinks by roughly a fifth when minified.

Server compression matters even more. Gzip or Brotli shrink CSS to a small fraction of its size, and minified files compress slightly better still, so use both. Removing CSS you don't use often saves the most of all; Tailwind CSS v3 and later only generate the classes your templates use for this reason.

Why size affects load time

CSS in the <head> is render-blocking: the browser shows nothing until it has downloaded and parsed it. Smaller CSS therefore improves First Contentful Paint (FCP, when the first text or image appears) and often Largest Contentful Paint (LCP, when the main content has loaded).

On fast broadband, a 10 KB difference is negligible. On a slow 3G connection of about 400 kbps, 10 KB takes roughly 200 milliseconds to transfer. Across several files and many mobile visitors, that adds up.

What minification doesn't do

It doesn't remove unused rules. That's the job of tools such as PurgeCSS or UnCSS.
It doesn't change the cascade. Selector order and specificity stay the same, as do media queries and custom properties.
It isn't fully reversible. A beautifier restores layout, but comments and the original formatting are gone for good.
It usually leaves vendor prefixes alone. Adding or removing prefixes is Autoprefixer’s job, though Lightning CSS can do it based on your browser targets.

Beautifying CSS

Beautifying (also called formatting or prettifying) adds line breaks and indentation back so you can read the file. You need it when:

you're debugging a live site and only have its minified CSS
a third-party library ships only a minified file
you want to inspect what a preprocessor or CSS-in-JS tool produced
the source is lost and the production file is all that is left

Minified input

.header{display:flex;align-items:center;gap:1rem;padding:1rem 2rem;background:#1a1a2e;color:#fff}.header__logo{font-size:1.5rem;font-weight:700}.header__nav{display:flex;gap:1.5rem;margin-left:auto}.header__nav a{color:#eee;text-decoration:none;transition:color .2s}.header__nav a:hover{color:#ffb400}

Beautified output

.header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 2rem;
  background: #1a1a2e;
  color: #fff;
}

.header__logo {
  font-size: 1.5rem;
  font-weight: 700;
}

.header__nav {
  display: flex;
  gap: 1.5rem;
  margin-left: auto;
}

.header__nav a {
  color: #eee;
  text-decoration: none;
  transition: color .2s;
}

.header__nav a:hover {
  color: #ffb400;
}

Media queries and other at-rules

Rules inside @media are indented one level deeper, which makes each breakpoint easy to spot. The same applies to @container, @layer, @supports and native CSS nesting.

CSS

@media (max-width: 768px) {
  .header {
    flex-direction: column;
    padding: 0.5rem 1rem;
  }

  .header__nav {
    flex-direction: column;
    margin-left: 0;
  }
}

@media (prefers-color-scheme: dark) {
  .header {
    background: #0a0a1a;
  }
}

Using the CSS minifier and beautifier

Open the CSS minifier and beautifier and choose Beautify or Minify.
For beautifying, pick an Indent of 2 or 4 spaces.
Paste your CSS and select Beautify or Minify. Below the output you see the original size, the new size and the difference.
Copy the result.

The minifier removes comments, line breaks and the spaces around { } ; : ,, and drops the last semicolon in each rule. It doesn't rewrite values or merge rules, so use cssnano or Lightning CSS in your build for those extra savings. Both modes remove comments. Everything runs in your browser.

Build tools

cssnano

A PostCSS plugin that adds structural optimizations on top of whitespace removal: merging rules, simplifying calc() and normalizing values. Each optimization can be turned on or off. It's the default minifier in webpack’s css-minimizer-webpack-plugin.

PostCSS

Not a minifier itself, but a framework that parses CSS into a syntax tree and runs plugins over it. Minification (via cssnano), autoprefixing and nesting are all PostCSS plugins.

Lightning CSS

A parser, transformer, bundler and minifier written in Rust, and much faster than JavaScript-based pipelines. Vite can use it for both CSS processing and minification.

clean-css

A long-standing Node.js minifier with many configuration options. It has its own command-line tool, and css-minimizer-webpack-plugin can use it instead of cssnano.

Online tools

For a one-off job, such as reading a production stylesheet or shrinking a small file, pasting into a browser tool is quicker than setting up a pipeline.

Other ways to deliver CSS faster

Inline critical CSS. Put the styles for the part of the page visible without scrolling in the HTML so the first render doesn't wait for a request.
Split by route. Load only the styles each page needs.
Compress. Turn on gzip or Brotli. Brotli usually produces text files 15 to 20% smaller than gzip.
Cache. Use content-hashed filenames such as styles.a1b2c3.css with long cache headers, so returning visitors don't download unchanged CSS.
Remove unused CSS before minifying.

When to minify and when to beautify

Keep your source CSS formatted and readable, and let the build minify it for production. Serve minified files to users, and avoid committing minified output in place of source.

When a bug only shows up in production, beautify the production CSS locally to find it, fix the source, and let the build minify it again.

How to minify and beautify CSS online