CSS Minifier
Minify CSS safely in your browser: strips comments and whitespace, shortens colors and zero units, keeps strings, url() and calc() intact. Shows bytes saved.
Removed 1 comment, kept 1 licence comment, 1 empty rule · 4 values shortened.
Strings, url() contents, the spaces inside calc() and custom property (--name) values are left as written; selectors are never rewritten.
Minified CSS loads faster: comments, indentation and line breaks mean nothing to the browser but can make up a third of a stylesheet. This minifier tokenizes the CSS properly, so it removes only what is safe — strings, url() paths, escaped class names such as .sm\:p-4 and the spaces calc() needs are never touched — and reports the size before and after.
How to use this tool
- Paste your stylesheet into the box.
- Keep /*! licence comments ticked if your CSS includes a framework licence.
- Leave value shortening on for #abc colours, unitless zeros and .5 instead of 0.5.
- Copy the minified CSS and check the bytes saved.
Formula
saved % = (original bytes − minified bytes) ÷ original bytes × 100
Sizes are counted in UTF-8 bytes. Spaces are removed around { } ; : , and around the combinators > + ~ in selectors, but kept where they carry meaning: the descendant space in div :first-child, the space between and and ( in media queries, and the spaces around + and − inside calc().
Example
The sample stylesheet has a licence comment, an ordinary comment, an empty .unused { } rule and a media query. The minifier keeps the licence, drops the rest, writes #FFFFFF as #fff, 0px 0.75rem as 0 .75rem and calc( 100% - 2px ) as calc(100% - 2px), and leaves 0s alone because a time needs its unit. The 362-byte sample becomes 279 bytes, about 23% smaller.
Frequently asked questions
Is it safe for production?
It only removes whitespace and comments and applies a few value shortenings that do not change meaning. It does not merge rules or reorder properties, which is where more aggressive minifiers sometimes break layouts.
Why is 0% not shortened to 0?
Some places need the unit: hsl(0, 0%, 0%) and percentages in flex shorthands, 0s in transitions and any value inside calc(). In the flex shorthand even 0px keeps its unit, because a bare 0 there is a flex factor. Only other lengths outside math functions become a bare 0.
Does it handle SCSS or Less?
Plain CSS, including nesting, @media, @supports and @layer, works. SCSS // comments and mixins are not CSS and are not supported — compile first, then minify.
Is my CSS uploaded?
No, everything runs in your browser.
Sources
Last updated:
Page address with these inputs: https://kakao.mobile/tools/css-minifier/
Cite or embed this tool
kakaoCalc. (2026, November 8). CSS Minifier. https://kakao.mobile/tools/css-minifier/
“CSS Minifier.” kakaoCalc, 8 Nov. 2026, kakao.mobile/tools/css-minifier/.
Paste this code into your page. The widget runs in your visitors' browsers, shows no ads and keeps a link back to this page. Embedding terms