Minify CSS to the fewest bytes or beautify it into readable rules, with the size saved shown. Unclosed braces and strings are pointed out by line, and nothing leaves your browser.
298 B → 223 B (25% smaller)
Runs in your browser; your code is never uploaded.
How to use it
Paste your CSS or open a .css file.
Choose Minify (and whether to merge rules) or Beautify (indent and where the opening brace goes).
Copy the result or download it as style.min.css or style.css.
What minifying does
Removes comments, spaces and line breaks, and the last ; in each block.
With “Merge rules” on, joins selectors that share the same declarations and drops declarations that a later one overrides.
Example
The button styles loaded above take 298 bytes. Minified they take 223 bytes (25% smaller): #ffffff becomes #fff, the comment and indentation go, and the media query stays in place:
Switch to Beautify to turn minified CSS from a website or library back into one declaration per line.
Minifying uses the open-source CSSO (MIT licence) and beautifying js-beautify (MIT). The same engine powers our HTML formatter and JavaScript minifier.
Frequently asked questions
Can minifying break my CSS?
CSSO only merges rules and shortens values where the result applies the same styles. If you rely on hacks that depend on exact rule order or on invalid CSS for old browsers, untick "Merge rules and shorten values": the minifier then only removes comments and whitespace.
Which comments are kept?
Comments that start with /*! (the usual way to mark a licence) stay where they are when "Keep /*! licence */ comments" is ticked. All other comments are removed when minifying, and kept when beautifying.
Does it work with SCSS or Less?
The minifier reads plain CSS, so compile SCSS or Less first and minify the CSS it produces. The beautifier can lay out simple nested SCSS, but Sass-only syntax such as @mixin arguments may come out oddly.
Why is there an error about a brace?
Before minifying, the tool checks that every {, ( and [ is closed, and that strings and comments end. A missing } usually means the rule above it never closed; the error shows that spot with a ^ under it.
Is my CSS uploaded?
No. Minifying and beautifying run in your browser, and the CSS minifier library downloads only the first time you use it.
