CSS Minifier

Minify CSS code online. Paste your stylesheet, pick a compression level, and get compact CSS with comments removed, shorthand properties merged and color values shortened.

FreeOnline Tool
Loading…

How to Use

  1. Paste your CSS into the input box on the left.
  2. Choose the compression level (basic whitespace removal or advanced property merging).
  3. Click "Minify" to run the compression.
  4. The minified CSS and the compression statistics appear on the right.
  5. Click "Copy" to take the result.

Features

  • Removes every CSS comment, including multi-line ones.
  • Eliminates redundant spaces, line breaks and trailing semicolons.
  • Merges properties that can be written in shorthand, such as the four margin values.
  • Shortens color values where possible, for example #ffffff to #fff.
  • Shows the original size against the minified size for a direct comparison.

Use Cases

Improving website performance
Compress your stylesheets to reduce transferred bytes, which combines well with Gzip for further gains.
Optimizing mobile pages
For data-sensitive mobile pages, smaller CSS means styles render quickly even on a weak connection.
Shrinking third-party stylesheets
Minify a customized or modified third-party CSS library before bundling it, keeping the total style payload small.
Validating framework slimming efforts
Test how much a CSS framework actually compresses to confirm your size optimization plan meets its target.

FAQ

Can minification break animations or pseudo-elements?
No. Only syntactically redundant characters are removed; every selector, property name and value keeps its meaning, including keyframes and pseudo-element selectors.
How do I debug minified CSS?
Keep the original CSS in development and minify only for the production build. Browser developer tools can also pretty-print minified CSS temporarily for inspection.
Are CSS custom properties supported?
Yes. Variable declarations and references are preserved, and only the surrounding whitespace is stripped; names and values are never altered.
Will @media queries still work after minification?
Yes. The structure and meaning of every media query is preserved, so responsive layouts behave exactly as before.