Minify or beautify: which one do you need?
They're opposite operations for opposite moments. Here's how to tell which moment you're in.
Shipping to production: minify
Your stylesheet is finished, reviewed, and about to go live. Minify it, save the bytes, ship the small file. A typical hand-written stylesheet shrinks 20–40%; on a 60 KB file that's a meaningful chunk of a mobile page load. Keep the readable original in your project and deploy the minified copy.
Reading someone else's CSS: beautify
You opened a site's stylesheet and it's one 4,000-character line. Paste it here, beautify, and suddenly it's rules and declarations you can actually read. This is the fastest way to learn how a site built an effect you like, or to find the one rule overriding yours.
Before a code review: beautify
Reviewing a diff full of inconsistent indentation wastes everyone's time. Run the stylesheet through Beautify first and the review becomes about the actual changes, not the formatting. Prettier's output is also what most teams' linters expect, so it doubles as a style check.
What 'safe' minification actually means
Safe minification removes only what the CSS specification says is insignificant whitespace. In practice that means: comments (they're never rendered), line breaks and indentation, spaces around punctuation like braces and colons, and the final semicolon in each rule: '.a{color:red}' is valid without it.
What it must never touch: anything inside quotes, anything inside url(), and the spaces inside calc(), min(), max() and clamp() where whitespace is part of the math. The classic failure is a minifier that turns 'background: url(my image.png)' into 'background:url(myimage.png)' and breaks the path. This one holds those regions aside and returns them byte-identical.
One thing it deliberately doesn't do: rewrite your values. '#ffffff' stays '#ffffff' instead of becoming '#fff', and duplicate selectors aren't merged. Aggressive optimisers do those rewrites, but they can change behaviour in edge cases (ever seen a shorthand override a longhand you needed?). Predictable beats clever for a quick tool.
How to Use CSS Minifier / Beautifier
- 1Choose 'Minify' to compress a stylesheet, or 'Beautify' to format it for reading.
- 2Paste your CSS into the input box (a whole stylesheet, a single rule, or the contents of a <style> tag), open a .css file, or press 'Try a sample'.
- 3The result appears as you type. Beautifying loads Prettier's CSS formatter the first time, which takes a moment; pick 2 spaces, 4 spaces or tabs for the indent.
- 4Compare the size before and after, shown in bytes with the percentage change.
- 5Copy the result, or download it as a file (styles.min.css when minified), and use it in your project or a <style> tag.
- 6Working with a preprocessor? Compile SCSS or Less to plain CSS first, then minify the compiled output: never the source.
Frequently Asked Questions
What does the CSS minifier remove?
Comments, line breaks and indentation, spaces around braces, colons, semicolons and commas, spaces around selector combinators (>, + and ~), and the last semicolon before each closing brace. So '.card > .title { color: red; }' becomes '.card>.title{color:red}'.
Can minifying break my CSS?
This minifier is built not to. It treats selectors and declarations differently: the + in 'calc(100% + 20px)' is arithmetic and needs its spaces, so they're kept, while the + in 'h1 + p' is a combinator and can lose them. Text inside quotes and url() is never touched, so content strings and file paths stay exactly as written.
Does it shorten colours or merge rules?
No. It removes whitespace and comments only; it doesn't rewrite values (such as #ffffff to #fff) or merge duplicate selectors. That keeps the output predictable: every rule is still where you wrote it, just smaller.
What does Beautify do?
It formats the CSS with Prettier: one declaration per line, consistent indentation (2 spaces, 4 spaces or tabs), a space after each colon and a blank line between rules. It's useful for reading minified CSS from a website or tidying a stylesheet before a code review. It also works on minified CSS, turning one long line back into readable rules.
Does it work with SCSS or Less?
Use it on plain CSS. Compile SCSS or Less to CSS first, then minify the result: their // line comments would swallow the code after them once line breaks are removed. Formatting SCSS source is best done in your editor.
Is my CSS sent to a server?
No. Everything runs in your browser and nothing is uploaded.
Should I just write minified CSS by hand?
Please don't. Write readable CSS, keep it in version control, and minify as a build step, or paste it here before deploying. Hand-minified source is unmaintainable, and the one time you need to debug it at 11pm, you'll be glad the original still exists.
About CSS Minifier / Beautifier
Every stylesheet you write for humans (indented, commented, spaced out) is a stylesheet that's bigger than it needs to be for browsers. The CSS Minifier closes that gap: it strips comments and every space a browser doesn't need, then tells you exactly how many bytes you saved. The Beautifier does the reverse, taking a crushed one-line stylesheet and laying it out with Prettier so a person can read it again.
The reason to use this minifier instead of a quick regex is the calc() problem. Most naive minifiers treat the whole file as text, so 'calc(100% + 20px)' becomes the invalid 'calc(100%+20px)' and your layout breaks in a way that's miserable to debug. This one knows the difference between a selector and a declaration: the + between 'h1' and 'p' is a combinator and can lose its spaces, but the + inside calc() is arithmetic and keeps them. Strings and url() values are never touched either.
It runs entirely in your browser, so proprietary stylesheets and client work never leave your machine. For the rest of a page, use the HTML and JavaScript minifiers, and minify as the last step before deploying, never in your source files.