Minify CSS Online: CSS Minifier

The Minified Output

The formatter running in minify mode on the input above produces:

.container{max-width:1200px;margin:0 auto;padding:0 1rem}.header{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;border-bottom:1px solid #e5e7eb}.nav-link{color:#374151;text-decoration:none;font-weight:500;transition:color .15s ease}.nav-link:hover{color:#3b82f6}.card{background:#fff;border-radius:.75rem;border:1px solid #e5e7eb;padding:1.5rem;box-shadow:0 1px 2px rgba(0,0,0,.05)}

All comments are gone. Whitespace between rules, after colons, and after commas is removed. #ffffff is shortened to #fff. The leading 0 in 0.15s and 0.05 is dropped. The result is one continuous line.

What Minification Removes

Minification targets characters that are syntactically required for authoring but irrelevant to the CSS parser:

Comments: /* ... */ blocks serve the developer, not the browser. Every comment is removed.

Whitespace: Newlines, indentation, and spaces around :, {, }, and , are all optional in parsed CSS. The parser only needs the structural characters.

Redundant characters: The trailing semicolon before a closing } is optional per the CSS spec. Minifiers remove it to save one character per rule block.

Color shorthand: #ffffff and #000000 become #fff and #000. rgba(0, 0, 0, 0.05) loses the space after each comma.

Leading zeros: 0.75rem becomes .75rem. 0.15s becomes .15s.

These optimizations together typically cut uncompressed file size by 15 to 30 percent.

Minification vs. Compression: The Actual Numbers

Minification and HTTP compression are different mechanisms. Both reduce the bytes transferred, but they compose differently:

Gzip wins by a wide margin because it compresses repetitive patterns, and CSS whitespace is extremely repetitive. Adding minification on top of gzip saves a few more kilobytes because it removes content that does not compress well (comments with unique text, long color values).

The practical conclusion: always enable gzip or Brotli on your web server first. Then add minification. Do not skip either step, but understand that HTTP compression is doing most of the work.

Build Tool Integration

In most modern frontend projects, CSS minification is handled automatically:

Vite and Rollup use esbuild for CSS minification in production builds. No configuration required. Running vite build produces minified CSS output by default.

webpack with css-loader requires the css-minimizer-webpack-plugin:

npm install css-minimizer-webpack-plugin --save-dev

// webpack.config.js
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [new CssMinimizerPlugin()],
  },
};

PostCSS with cssnano gives you the most control. cssnano is a PostCSS plugin that applies a configurable set of optimizations. The default preset is safe and does not reorder properties or apply transformations that could break rendering:

npm install cssnano postcss postcss-cli --save-dev

// postcss.config.js
module.exports = {
  plugins: [require('cssnano')({ preset: 'default' })],
};

For standalone one-off minification without a build tool, the command line option is cleancss:

npm install clean-css-cli --save-dev
npx cleancss -o output.min.css input.css

When to Use an Online Minifier

An online minifier is the right tool when you need to check how aggressively a file will be minified before committing to a build tool setup, or when you are working with a CSS snippet that does not belong to a project with a build pipeline. It is also useful for quickly minifying a third-party CSS file you are copying into a project.

For anything that ships to production on a recurring basis, integrate minification into your build pipeline so it runs automatically. Manual minification is a step that gets forgotten, especially when files are updated. The diff checker is useful for comparing the original and minified versions to verify that the output looks correct before deploying.