Softonic

CSS Minifier

Step 1 / 3
Next

A minified CSS file loads noticeably faster than its pretty-printed twin, and the difference compounds across every page load. This minifier strips whitespace and comments and removes trailing semicolons, without changing the cascade or any rule’s effect. Output is always valid CSS that browsers parse identically to the original.

How to minify CSS

  1. 1

    Paste the CSS

    Any CSS: hand-written, Sass-compiled, inline style blocks.

  2. 2

    Minify

    Press Minify CSS to strip comments, whitespace and trailing semicolons in one pass.

  3. 3

    Check the savings

    The byte savings are reported next to the compressed output.

  4. 4

    Copy the result

    Copy the minified CSS into your production bundle or save it as `.min.css`.

What the minifier does

Transformations (never change behaviour):

  • Strip comments (all of them, including /*! license blocks).
  • Strip unnecessary whitespace (between selectors, declarations, braces).
  • Remove trailing semicolons before closing braces.
  • Collapse multi-line rules to one line.

That is all it does, which is why the output behaves exactly like the original: every selector, property and value stays as you wrote it.

Typical savings

Source Original size Minified size Savings
Pretty-printed hand-written CSS 20 KB 12 KB 40%
Sass-compiled, dev mode 45 KB 25 KB 44%
Already-minified + gzip 10 KB 10 KB 0%

On top of minification, gzip compression at the server adds another 60-80% saving because CSS is highly redundant. The two stack; always do both.

What minification does not do

  • Remove unused CSS. That is tree-shaking / PurgeCSS territory, which requires analysing your HTML or components.
  • Shorten hex colours, collapse zero units or merge declarations. Those aggressive transforms are the job of cssnano, esbuild or Lightning CSS, not this tool.
  • Merge duplicate selectors into one. Risky because source order affects the cascade; some minifiers try, most skip it.
  • Rename classes. That is CSS-in-JS or CSS Modules, not minification.
  • Inline critical CSS. That is a separate build-time step.

Preserving license comments

Many minifiers preserve comments that start with /*!, used for license headers:

/*! Bootstrap v5.3 · MIT License · https://github.com/twbs/bootstrap */

This tool strips all comments, so if your CSS carries license headers you must add them back after minifying, or use a build tool with a preserve-licenses option such as cssnano or esbuild.

Source maps

For production debugging, build tools generate a source map alongside the minified output:

styles.min.css
styles.min.css.map

DevTools can read the map and show you the original pretty-printed line numbers when you inspect an element. This tool does not generate source maps.

CSS minification in a build pipeline

  • Vite, Webpack, Parcel: handle this automatically in production builds.
  • PostCSS with cssnano: the standard stand-alone minifier.
  • esbuild: also includes CSS minification.
  • cssnano presets: default for safe transformations, advanced for aggressive (with some trade-offs).

This tool is for one-off minification, quick fixes, and learning what minifiers actually do. For a production workflow, use a build tool so your source stays readable and only the output is minified.

When minification can break your CSS

Rare but possible:

  • Whitespace-sensitive selectors: .foo .bar vs. .foo.bar, the space matters.
  • Custom property values with spaces: --shadow: 0 2px 4px rgba(0,0,0,0.1), the commas inside rgba() must not be stripped.
  • Unclosed block comments: /* missing close eats everything after it. Minifiers can misbehave on malformed input.

The fix: always run your minified output through a lint/test pass before shipping.

Frequently Asked Questions

No. A correctly-minified CSS file is byte-different but semantically identical. Every selector, property and value produces the same visual result. If you see a rendering change, the minifier has a bug or your input had whitespace-sensitive syntax.

Yes, when you press Minify. The CSS you paste is sent to our server to be minified and the result is returned to the page. It is not saved to a database and it is not added to the page link.

After. Minify the final compiled CSS that browsers actually receive. Sass output is already reasonably compact but has whitespace and comments that minification strips.

Modest but real, typically 5-15% on top of gzip. Stripping whitespace and comments also makes the gzip patterns slightly denser.

Related Tools

ASCII Table Reference

Full ASCII table from 0 to 127 with decimal, hex, octal, binary, standard names and HTML numeric-reference notation, including NUL, LF and DEL.

HEX Color Picker

Pick or enter a HEX colour and get RGB, HSL, approximate CMYK, relative luminance and contrast ratios against white and black.

Color Palette Generator

Generate monochromatic, analogous, complementary, triadic or tetradic color palettes from a base HEX color and export copy-ready CSS variables.

HTML Character Reference

Searchable list of HTML entities, their named and numeric codes, and a one-click copy for special characters and symbols.

FPS Counter

Measure browser FPS with requestAnimationFrame, smoothing, min/max frame rate, warnings and an optional graph. Runs locally with no upload or API.

JSON Formatter

Paste JSON to pretty-print with 2 or 4 spaces, minify it to compact output, or run a quick syntax check before copying the result.