codefronts−28.0% · 101 B saved

CSS Minifier

CSS input361 B

Minified CSS260 B · −28.0%

About this tool

Paste any CSS and instantly get a minified, production-ready version — strips comments, whitespace, and redundant tokens with live size savings.

Why minify CSS?

⚡

Faster page loads

Smaller CSS files mean fewer bytes over the wire and faster First Contentful Paint. On mobile networks, every kilobyte saved is real time saved for your users.

📉

Less bandwidth, lower cost

Minified CSS typically shrinks 20–60% before gzip and another 10% after. At scale, that compounds into lower CDN bills and a smaller carbon footprint per request.

🎯

Better Core Web Vitals

CSS blocks rendering. Trimming whitespace and comments lets the browser parse your stylesheet sooner — directly improving LCP and lowering CLS risk from late-loading styles.

🔒

Production-ready output

Build pipelines minify automatically, but for one-off snippets, embedded styles, or quick experiments, a manual minify step gives you the same clean output without setting up tooling.

▶

How to use this minifier

Paste your CSS

Drop in any CSS — a single rule, a full stylesheet, media queries, or @keyframes. Pasting works from VS Code, DevTools, Figma, or your design system docs.

Tweak the options

Toggle whether to keep /*! important comments, trim leading zeros (0.5 → .5), drop units on zero values (0px → 0), and shorten 6-digit hex colours (#ffffff → #fff).

Read the savings

The stats bar shows original size, minified size, bytes saved, and percentage reduction — handy for PR descriptions or before/after comparisons in commit messages.

Copy or download

Click Copy for the clipboard, or Download to grab a styles.min.css file. Either way the output is ready to drop straight into <style> tags or a CDN.

⇄

Minification rules at a glance

Rule	Before	After
`Remove comments`	`/* card */ .a { ... }`	`.a{...}`
`Collapse whitespace`	`.a { color : red ; }`	`.a{color:red}`
`Drop trailing semicolon`	`color: red;}`	`color:red}`
`Trim leading zero`	`opacity: 0.5`	`opacity:.5`
`Drop units on zero`	`margin: 0px`	`margin:0`
`Shorten hex`	`color: #ffffff`	`color:#fff`
`Strip space around tokens`	`a > b , c`	`a>b,c`
`Keep /*! comments`	`/! License /`	`/! License /`

Minification patterns

Before

.btn {
  display: inline-flex;
  padding: 12px 24px;
  /* primary action */
  background-color: #ffffff;
  border-radius: 8px;
  opacity: 0.9;
  margin: 0px;
}

After

.btn{display:inline-flex;padding:12px 24px;background-color:#fff;border-radius:8px;opacity:.9;margin:0}

@media

/* before */
@media (min-width: 768px) {
  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

/* after */
@media (min-width:768px){.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}}

✦

Pro tips

Always gzip on top

Minification removes ~30% of bytes; gzip or Brotli on top removes another ~70%. Make sure your server (or CDN) has compression enabled — minify alone leaves performance on the table.

Don't minify what you author

Keep your source CSS readable and version-controlled. Minify only as a build step or right before deploy — never commit minified files alongside source files.

Preserve license comments

Open-source CSS often requires the licence header to ship with the bundle. Use /*! ... */ syntax and keep the option on so legal text survives minification.

Sourcemaps for debugging

When you minify in a real build (PostCSS, esbuild, Lightning CSS), generate a .map file so DevTools can show original line numbers. This tool produces a single-shot output without sourcemaps.