CSS Minifier

Minify CSS to reduce file size by removing whitespace and comments.

Input: 201 chars→Output: 142 chars (29.4% smaller)

CSS input

Minified output

.container{display:flex;flex-direction:column;padding:16px 24px;background-color:#ffffff}.title{font-size:24px;font-weight:bold;color:#333333}

Why minify CSS?

CSS minification removes all characters that are not required for the browser to interpret the stylesheet correctly — spaces, line breaks, comments, and unnecessary semicolons. The result is a smaller file that downloads faster. For a site with 50KB of CSS, a typical 30–40% reduction saves 15–20KB, which translates directly to faster page load times, especially on mobile networks.

What minification removes

Comments

/* navigation styles */

Only needed for developers reading the code

Whitespace

Spaces, tabs, newlines

Browsers ignore whitespace in CSS

Last semicolon

color: red; }

The final semicolon before } is optional

Zero units

margin: 0px

Can be written as margin: 0 — unit unnecessary for zero

Colour shorthand

#ffffff → #fff

3-digit hex is equivalent for double digits

Redundant values

padding: 10px 10px

Equivalent to padding: 10px

Minification vs. compression vs. bundling

These three techniques are often confused but serve different purposes and stack on top of each other for maximum effect:

Minification  → removes unnecessary characters (reduces file size 20–40%)
Gzip/Brotli  → compresses the minified file for transfer (reduces a further 60–80%)
Bundling     → combines multiple CSS files into one (eliminates multiple HTTP requests)

Combined effect example:
  Original CSS: 5 files × 30KB = 150KB, 5 requests
  Bundled:      1 file × 150KB, 1 request
  Minified:     1 file × 95KB
  Gzip:         1 file × 20KB transferred

When NOT to minify

Never edit a minified CSS file directly — always keep the original source and minify as a build step. For debugging in browser DevTools, use source maps to map minified CSS back to original line numbers. In development environments, serve unminified CSS so error messages reference readable source lines.

Frequently asked questions

Will minifying CSS change how my site looks?

No. Minification only removes whitespace, comments and redundant characters — the styles and the rendered result are exactly the same.

What is the difference between minify and Gzip?

Minification removes unneeded characters from the file itself; Gzip or Brotli then compresses that file for network transfer. Use both together for the smallest possible download.

Can I un-minify CSS later?

You can re-indent (“beautify”) it for readability, but comments and original formatting are lost. Always keep your original source file under version control.