Skip to content
Kordu Tools
Developer Tools Runs in browser Updated 17 Apr 2026

CSS Minifier

Minify and compress CSS for production — strip whitespace, merge rules, and show size reduction instantly.

Loading rating…

How to use CSS Minifier

  1. Paste your CSS

    Paste your CSS stylesheet or code into the input panel on the left.

  2. Choose an optimisation level

    Safe mode removes whitespace, comments, and redundant values without restructuring rules. Aggressive mode also merges compatible selectors and declarations for smaller output.

  3. Click Minify

    Click the Minify button to compress your CSS. The original size, minified size, and percentage reduction are shown below the output.

  4. Copy or download the result

    Click Copy to copy the minified CSS to your clipboard, ready to paste into your project or bundler.

CSS Minifier FAQ

What is the difference between safe and aggressive optimisation?
Safe mode removes whitespace, comments, and redundant values without changing the overall rule structure. Aggressive mode also performs structural optimisations such as merging compatible rules and declarations. It usually produces smaller output, but as with any structural minification you should test the result before deploying.

Does CSS minification affect performance?
Yes. Smaller CSS files parse faster, reduce bytes transferred, and improve Time to First Byte (TTFB) and render-blocking resource load times. Combined with gzip or Brotli compression on the server, minified CSS can be 60–80% smaller than the original.

Will this work with CSS variables and modern CSS?
Yes. The minifier handles modern CSS syntax including custom properties, calc(), clamp(), logical properties, CSS Grid, Flexbox, @layer, @container, and standard at-rules. It minifies existing syntax, but it does not transpile or polyfill unsupported features.

Is my CSS sent to a server?
No. All minification runs in your browser. Your stylesheets never leave your device and are not stored or logged.

Can I use this in a CI/CD pipeline?
This browser tool is intended for quick one-off minification. For automated build pipelines, use a CSS minifier package such as CSSO, Lightning CSS, or your bundler's built-in minifier in Vite, Rollup, Parcel, or webpack.

Does it support SCSS or Less?
No. This tool processes plain CSS only. Compile your SCSS or Less to CSS first using the Sass CLI or Less CLI, then paste the compiled output to minify it.

Does minification remove my CSS comments?
Yes. Standard CSS comments are stripped during minification, which reduces file size and removes non-functional text from the final stylesheet.

Background

CSS Minifier compresses stylesheets for production deployment entirely in your browser. Choose safe minification when you want compact output without restructuring selectors and declarations, or switch to aggressive optimisation to allow rule merging and other structural transforms for the maximum possible reduction.

The results panel shows original file size, minified size, and the percentage saved. You can compare safe versus aggressive output instantly and copy the result directly into your build pipeline or deployed stylesheet.

Supports all modern CSS features: custom properties (variables), calc(), clamp(), CSS Grid, Flexbox, logical properties, modern selectors, and at-rules like @layer, @container, and @media. Ideal for integrating into build workflows before deploying to production — paste the output directly or copy it into your bundler configuration. All processing runs entirely in your browser with no code sent to any server.

Related tools

JavaScript Minifier

Minify JavaScript code with Terser — mangle variables, strip dead code, and show size reduction instantly.

SVG Optimizer

Optimize and compress SVG files with SVGO — remove metadata, comments, and redundant paths for 40–80% size reduction.

JSON Formatter

Format, validate, and minify JSON instantly — with configurable indentation, error location, and tree view.

Diff Checker

Compare two texts, code files, or documents side by side — word-level diff highlighting, private and browser-based.

Learn more

developer

CSS Flexbox & Grid Cheat Sheet: Every Property Explained

Complete CSS Flexbox and Grid reference with every property, values, and visual examples. 92% of sites now use Flexbox or Grid for layout.