Skip to content
CSSMinify

CSS Minifier & Beautifier

Minify or beautify CSS instantly — removes whitespace, comments, and redundant rules. Runs entirely in your browser.

Drop a .css file here, or click to upload

Ctrl + Enter to minify

Why minify CSS?

CSS minification removes unnecessary whitespace, comments, and redundant code from your stylesheet, reducing file size without changing any functionality. Smaller files mean faster network transfer and improved Core Web Vitals scores — particularly LCP (Largest Contentful Paint) and FCP (First Contentful Paint), which Google uses as ranking signals.

A typical production stylesheet can shrink 30–60% after minification. For render-blocking CSS in the <head>, every kilobyte counts.

What this minifier removes

  • Whitespace — spaces, tabs, and line breaks between tokens.
  • Comments — /* all comments */ including /*! preserved */ annotations.
  • Trailing semicolons — the last declaration in a rule block doesn't need a semicolon.
  • Redundant units — 0px becomes 0.
  • Color shorthand — #ffffff becomes #fff.

The beautifier adds back consistent indentation and line breaks for human readability — useful when working with minified third-party CSS that you need to inspect or modify.

CSS minification in your build pipeline

For production projects, integrate CSS minification into your build pipeline rather than doing it manually. Common options:

  • Vite / Rollup — built-in CSS minification with cssnano in production builds.
  • PostCSS + cssnano — the most configurable option; runs as a PostCSS plugin.
  • esbuild — fast minifier with --minify-css flag.
  • webpack css-minimizer-webpack-plugin — wraps cssnano for webpack projects.

This online tool is ideal for one-off minification, inspecting third-party stylesheets, or when you don't have a build pipeline available.