CSS Minifier

Minify CSS in the browser.

About this tool

Strip comments and unnecessary whitespace from CSS to shrink payload size. Useful for quick checks; production builds usually minify in the bundler.

How to use

Paste readable CSS, run Minify, compare byte size mentally, then use your build pipeline for the real release artifact.

Example

Example includes a comment that minification removes.

Input

.hero {
  /* homepage band */
  padding: 4rem 1.5rem;
  background: #0f172a;
  color: #e2e8f0;
}

Output

.hero{padding:4rem 1.5rem;background:#0f172a;color:#e2e8f0}

Tip

Do not minify as your only source of truth — keep a formatted original in git.

Good to know

How much smaller will my CSS get?

It depends on how much whitespace and how many comments the source has — heavily commented, indented CSS shrinks the most. This tool only strips whitespace and comments; a build-time minifier can also merge and shorten rules, so use it for the real release.

Can minifying break my styles?

Whitespace around descendant selectors such as “nav :first-child” is kept, because removing it would change the meaning. Comments are removed, including license banners.

Chrome Extension