CSS Minifier
Minify CSS in your browser with csso: strips whitespace and comments, shortens values and merges duplicate rules without changing the cascade. Keeps /*! licenses */ and calc(). Nothing uploaded.
798 views · 26 uses
What this tool does
You paste your CSS and it returns the minified version: no spaces, line breaks or comments, with shortened values and duplicate rules merged. It tells you how much it weighed, how much it weighs now and the saving as a percentage, and you copy it with one click.
Minification happens in your browser, with the csso engine loaded on demand; the CSS is never uploaded to any server. It works the same for a 200-line sheet as for a whole theme.
How to use it
- Paste the CSS into the input field.
- Click Minify CSS.
- Copy the result with the button or select it from the box.
There are no options because none are needed: the engine always applies the set of safe transformations. If anything in the result surprises you, what it does and does not do is explained below.
What exactly changes (and why it breaks nothing)
A CSS minifier does two kinds of work. The lexical part is the obvious one: it removes spaces, line breaks, the last semicolon in each block and the comments. The structural part, which is what sets csso apart from a plain “strip whitespace”, rewrites the CSS into an equivalent but shorter form:
| Before | After | Why it is equivalent |
|---|---|---|
margin: 0px 0px 0px 0px | margin:0 | Zero takes no unit and four equal sides collapse |
color: #ffffff | color:#fff | Short hex form |
font-weight: bold | font-weight:700 | Same value, fewer letters |
.a{color:red}.b{color:red} | .a,.b{color:red} | Two rules with the same declaration are merged |
.a{color:red}.a{margin:0} | .a{color:red;margin:0} | Two blocks of the same selector are joined |
0.5s | .5s | The leading zero is redundant |
Merges only happen when they do not change cascade order: if a third rule sits between two rules of the same selector and could override them, they are left apart. It is the most tested part of the engine and the reason to use csso rather than a regular expression.
What is kept on purpose
- License comments starting with
/*!are preserved. It is the convention used by Bootstrap, Normalize and almost every library; if you want a comment to survive, give it the exclamation mark. - Old browser hacks (
*zoom,_height) are left as they are. - CSS variables (
--primary-color) are not touched: the engine cannot know their runtime value, so it neither shortens nor removes them even when they look unused. calc(): the spaces around+and-inside the function are kept. Without them,calc(100%-20px)stops being a subtraction and becomes an invalid value; it is the classic bug of home-made minifiers.
How much you actually save
With hand-written CSS, between 20 and 40 % of the size; with output already generated by Sass or Tailwind, less, because it is compact to begin with. But that is not the number that matters: servers compress with gzip or Brotli before sending, and on already-compressed text minification adds rather less than the percentage above suggests. Minifying is still worth it for two reasons compression does not cover: the browser parses fewer bytes when building the CSSOM, and merged rules are fewer rules to evaluate on every style change.
When to minify here and when not to
This tool is for loose CSS: a static site’s stylesheet, the <style> block of an email, the critical CSS you are about to inline in the <head>, or to see what a minifier does to your code before wiring it into the build. If you have a build process (Vite, Astro, webpack, Laravel Mix), it already minifies in production and there is no point doing it twice: minifying the source leaves you unable to read it and saves nothing in the end.
For the opposite direction, when you have minified CSS and need to read it, there is the CSS beautifier.
Reviews & ratings
No reviews yet. Be the first to leave one!
Related guides
Blog tutorials where this tool comes in handy.
Related tools
Others from the catalogue that pair well with this one.