CSS Minifier Online — Compress CSS & Reduce Size

Strip whitespace, line breaks, and comments to shrink stylesheets by 20–40%. Selectors, values, and rendering stay identical. 100% in-browser — no upload, no account.

Input CSS

Minified CSS

What is a CSS Minifier?

A CSS minifier compresses a stylesheet by stripping every byte the browser does not need to render the page — line breaks, indentation, comments, and the spaces around {, }, :, ;, and ,. Selectors, properties, values, and cascade order are preserved exactly, so visual output is identical.

Smaller CSS means less render-blocking work in the critical path, faster First Contentful Paint, and better Core Web Vitals. The OpenFormatter CSS minifier runs entirely in your browser — no upload, no rate limits, no account — making it safe for stylesheets that include internal class names, design-token comments, or unreleased UI work.

How to minify CSS online — 4 steps

Paste your CSS. Drop in production stylesheet, hand-written rules, or a snippet from an exported design tool. Click Load Sample for a demo.
Click Minify. The tool strips whitespace and comments client-side and emits a single-line minified result.
Compare sizes. Typical hand-written CSS shrinks 20–40% before any gzip or Brotli compression by the server.
Copy and ship. Use the Copy button to grab the minified output and paste it into your build artifact, inline <style>, or CDN bundle.

Before and after — minification example

Input (193 bytes)

/* Button */
.btn {
  display: inline-block;
  padding: 12px 24px;
  background-color: #2563eb;
  color: #fff;
  border-radius: 6px;
}

Output (114 bytes — 41% smaller)

.btn{display:inline-block;padding:12px 24px;background-color:#2563eb;color:#fff;border-radius:6px}

Aggressive Whitespace Strip

Removes line breaks, indentation, and the optional spaces around braces, colons, semicolons, and commas — without touching values inside strings or url().

Comment Removal

Strips both /* block */ and authoring comments. Authoring notes about TODOs, hacks, or design tokens never reach production users.

Client-Side Privacy

CSS never leaves your browser. Internal class names, vendor design tokens, and unreleased component styles stay private — verify in DevTools Network tab.

Common use cases

check_circleMinifying CSS as a final step before deploying to production for faster Core Web Vitals
check_circleCompressing critical CSS for inline injection into <style> in the document head
check_circleReducing payload of email-template stylesheets that have strict size limits
check_circleShrinking third-party CSS before bundling it into your application
check_circleCompressing component-library CSS for npm-package distribution
check_circleOptimising CSS payload for mobile users on slow 3G/4G connections
check_circleMinifying compiled SCSS/LESS output before publishing to a CDN
check_circleGenerating a smaller stylesheet for AMP and other size-budget HTML formats

Minify vs. beautify — when to use which

A minifier and a beautifier are exact inverses. Minify when you are shipping CSS to production — the browser does not care about whitespace, but the network does. Beautify when you are debugging or reviewing third-party CSS that arrived in a single line. Both operations preserve selectors, properties, and values byte-for-byte; only formatting changes. To reverse a minified file, paste it into our CSS Beautifier.

Need to format, convert, or compile CSS?

OpenFormatter ships beautify, pretty-print, and convert tools for CSS, LESS, SCSS, and SASS — all browser-side.

CSS Beautifier CSS to SCSS All CSS Tools

Frequently Asked Questions

Is minified CSS functionally identical to the original?

Yes. Our CSS minifier strips only whitespace, line breaks, and comments. Selectors, properties, values, specificity, and source order are preserved exactly, so the browser renders the page identically to the unminified version.

How much smaller does CSS get after minification?

Hand-written CSS typically shrinks 20–40% after minification. When the minified output is then served with gzip or Brotli compression on the origin or CDN, total transfer savings on the wire usually reach 75–90%.

Does the minifier preserve CSS custom properties (variables)?

Yes. CSS custom properties such as --primary: #2563eb are plain CSS syntax and are kept exactly as written. The var(--primary) references are also untouched, so cascade resolution behaves the same.

Will minification break my media queries or @keyframes?

No. @media, @keyframes, @supports, @font-face, and @import at-rules are preserved with their nested blocks intact. The minifier only collapses whitespace inside and around them — the structure is unchanged.

Should I minify source SCSS/LESS or the compiled CSS?

Always minify the final compiled CSS, never the source SCSS or LESS. Build pipelines (PostCSS, esbuild, Vite, webpack) compile preprocessor source, then run a minifier such as cssnano on the resulting CSS. Source maps let you debug back to the SCSS/LESS lines.

Is my CSS uploaded to your servers?

No. The CSS minifier runs entirely in your browser using JavaScript. Stylesheets containing internal class names, design-token comments, or proprietary rules never leave your device. Verify it yourself in DevTools Network tab — no requests fire when you click Run.

Does this minifier shorten color values like #ffffff to #fff?

This minifier focuses on safe whitespace and comment stripping — it does not perform aggressive optimisations like color shortening, property merging, or shorthand collapsing. For those transformations use a build-time tool such as cssnano with optimisation presets enabled.

Can I un-minify CSS back to readable form later?

Yes. Paste the minified output into our CSS Beautifier (or CSS Pretty Print) tool and it will reformat the stylesheet with proper indentation and line breaks. The two operations are exact inverses for whitespace.