CSS Minifier - Free Online Tool

CSS Minifier strips comments, collapses whitespace, and tightens punctuation in your CSS so style sheets download faster, parse faster, and use less bandwidth without changing how any page looks.

Minify CSS

Remove comments

CSS input

Minified CSS

What is CSS Minifier?

CSS Minifier is a free, browser-based tool that compresses CSS files and snippets by removing comments, collapsing every run of whitespace, and tightening the spacing around braces, colons, semicolons, and combinators. The output is functionally identical to the input — every browser renders the minified version the same as the original — but the byte count drops significantly, which translates to faster First Contentful Paint, lower Cumulative Layout Shift, and less mobile data usage.

CSS Minifier is safe by default: string literals, url() values, and embedded data URIs are preserved verbatim so font references, background images, and inline SVG continue to work. You can toggle comment removal off if your build pipeline relies on CSS comments as licensing notices or as markers that some other tool reads.

Typical users are developers shrinking critical CSS for above-the-fold rendering, designers preparing email-safe stylesheets, and engineers optimising bundle size in a static site export. Because all processing runs locally, your design tokens and proprietary stylesheets never leave the device for the compression pass.

How to Use This CSS Minifier

Paste your formatted CSS into the input textarea. Whole files, individual rule blocks, and fragments are all accepted.
Decide whether to remove comments. Leave the option on for most production output; turn it off if you need to preserve licence headers or build-tool markers.
Click Minify. CSS Minifier walks the source, preserves string and url() values, and emits a compact single-line version that browsers parse faster.
Read the size summary below the output. You will see how many bytes the input took, how many the minified output takes, and the percentage saved — a quick sanity check on the savings.
Click Copy to send the minified CSS to your clipboard and paste it into your build artifact, inline <style> block, or production asset.
Use Clear when you want to compress a different snippet so the input, output, and error states reset together.

Why Use This CSS Minifier?

Reduces CSS payload size so critical above-the-fold styles download faster, which directly improves First Contentful Paint on slow connections.
Strips comments that should not ship to production, including TODOs, internal notes, and licence headers that bloat the response.
Preserves all values exactly — strings, url() references, data URIs, and custom properties are emitted byte-for-byte so the cascade behaves identically.
Runs locally in your browser, so proprietary design tokens, internal product themes, and prelaunch CSS never leave the device.
Shows a byte savings summary after each run, making it easy to confirm that minification is worth the build complexity for your specific stylesheet.
Pairs with CSS Beautifier so you can switch between readable source and compressed production output in a single workflow.

When to Use CSS Minifier

Generating inline critical CSS for the <head> of a landing page to improve First Contentful Paint without blocking the main render.
Compressing transactional email CSS where inline styles are required and every byte counts toward provider size limits.
Shrinking design system bundles before they ship to documentation sites or component preview pages.
Compressing CSS-in-JS extracted output during a static export so the resulting HTML has a smaller embedded style block.
Preparing CSS snippets to embed inside JSON strings or build artifacts where extra whitespace inflates the surrounding file.
Cleaning up auto-generated CSS before committing to version control so diffs reflect real changes rather than whitespace edits.

CSS Minifier Features

Whitespace collapsing

Runs of spaces, tabs, and newlines are reduced to the minimum that preserves CSS semantics. Spaces between values that need separation (such as box-shadow components) are preserved, while purely cosmetic whitespace is removed.

Punctuation tightening

Spaces around braces, colons, semicolons, and combinators (>, +, ~) are removed. Empty rules and trailing semicolons before closing braces are cleaned up for additional savings.

Comment removal

CSS comments are stripped from the output by default. A toggle lets you keep them when licence headers, attribution notices, or build-tool markers must survive.

String and url() preservation

Quoted strings, url() values, data URIs, and custom property values are passed through verbatim. The minifier never alters a value, only the whitespace around it.

Byte savings summary

After each run, the tool displays input size, output size, and percentage saved. This makes the savings visible so you can decide whether the optimisation is worth automating in a build step.

Local-only processing

All compression happens in your browser. Your CSS is never transmitted, which keeps proprietary design tokens and unreleased stylesheets confidential.

How CSS minification saves bytes without changing rendering

CSS parsers ignore most whitespace and all comments when building the rule list. A space between a property name and its colon, between a value and the next declaration, or after a closing brace serves only humans — the browser would parse the same rules without any of those characters. CSS Minifier removes that overhead while preserving the spaces that genuinely matter, such as the separators inside shorthand values like margin: 8px 16px or background: #fff url("a.png") no-repeat.

Comments are a different category. They add no rendered output but can be load-bearing for tooling, licence compliance, or build pipelines. CSS Minifier removes them by default because most production stylesheets do not need them, but exposes a toggle so the rare case where they matter is supported without manual surgery on the output.

Minifying CSS also pairs well with brotli or gzip transport compression. Minification removes the bytes that compression would otherwise have to handle, and the two techniques stack — minified CSS gzips smaller than verbose CSS, so enabling both gives the smallest delivered payload.

Decision Guide

Best for

Developers shrinking critical above-the-fold CSS.
Designers building email-safe inline styles within client byte limits.
Static-site authors looking for quick payload wins.

Avoid when

Your dependencies require licence headers in the minified file (disable comment removal).
You want to review or edit the result — beautify first, then minify before shipping.

Example

Minify a CSS rule

Input

.btn {
  color: #fff;
  background: #0070f3;
  padding: 8px 12px;
}

Output

.btn{color:#fff;background:#0070f3;padding:8px 12px}

CSS Minifier Best Practices

Minify in the build pipeline

CSS Minifier is great for one-off compression, but production sites benefit from automated minification on every build. Use this tool to evaluate the savings, then move the same logic into PostCSS, Vite, or Next.js so every release benefits without manual work.

Keep a beautified source of truth

Commit the readable version of stylesheets to version control so diffs are reviewable. Minify only as part of the build output, not in the source files developers edit.

Preserve licence headers when required

If you use third-party CSS that requires attribution in the file, turn off comment removal so licence headers survive. Some open-source libraries require this even for the minified output.

Compress critical CSS inline

Inline only the smallest possible set of above-the-fold rules in <style>. CSS Minifier helps you cram more critical styling into the same byte budget without sacrificing render quality.

Pair minification with gzip or brotli

Minification reduces the raw payload, but transport compression delivers further savings. The two combine well — enabling both gives the smallest delivered size and the fastest FCP.

Troubleshooting

Output is almost identical to the input.

The source may already be compact. Look at the byte summary to confirm savings; if zero, your CSS is already minified.

Licence header disappeared.

Turn off "Remove comments" so attribution and licence notices survive the minification pass.

Common CSS payload problems CSS Minifier addresses

Critical CSS budget is too tight

Inline critical CSS needs to fit inside the first packet for fast First Contentful Paint. Minifying lets you cram more rules into the same byte budget.

Email CSS hits client size limits

Several email clients clip messages beyond a certain size. Minifying inline styles is a quick way to keep the whole email visible without restructuring the template.

CSS bundle is bloated with developer comments

Comments and notes accumulate over time. CSS Minifier removes them in one pass, so internal commentary never reaches the production payload.

Build output is larger than expected

Some bundlers emit verbose CSS by default. Running CSS Minifier over the output is the fastest way to confirm whether further compression is achievable.

Static export ships uncompressed CSS

Static-site generators often skip minification by default. CSS Minifier provides a quick way to evaluate savings before configuring the build step.

FAQs

Will minified CSS render identically to the original?

Yes. CSS Minifier only removes whitespace and comments that the parser ignores. Selectors, declarations, values, custom properties, url() references, and string content are preserved exactly, so the minified output renders the same on every standards-compliant browser.

Does it support modern CSS features like custom properties and @container?

Yes. CSS Minifier does not interpret CSS at the property level, so any valid syntax — including custom properties (--token), :is(), :has(), @container, @supports, and CSS nesting — passes through unchanged in the output.

How much smaller will my CSS get?

It depends on the source. Heavily commented and indented CSS can shrink by 30–50 percent. Already-compact CSS may shrink less. The tool reports the exact byte savings after each run so you can judge for yourself.

What happens to my licence headers?

They are removed by default along with all other comments. Turn off comment removal when your dependencies require licence attribution in the minified file, or strip them with a CSS-in-JS plugin that keeps a "preserve" hint.

Does CSS Minifier send my styles to a server?

No. All compression runs in your browser. Your stylesheets are never uploaded, so proprietary design tokens and internal product themes remain confidential during the operation.

Can I undo a minification?

Yes, by running the output through CSS Beautifier on the same site. Round-tripping through both tools is safe as long as the input is valid CSS to start with.

Why is gzip already enabled — do I still need to minify?

Yes. Gzip and brotli compress repetitive text well, but minification removes the bytes that compression would otherwise need to handle. The two techniques stack, and minifying before compression typically produces the smallest delivered payload.

Does the minifier rename CSS classes?

No. CSS Minifier only removes whitespace and comments. Class names, IDs, and custom properties are preserved exactly so the HTML that references them does not need to change.

CSS Minifier shrinks stylesheets without touching how they render — use it to fit critical CSS into inline budgets, ship lighter email templates, and squeeze extra performance from your existing assets.

CSS Beautifier

Live

Format and indent minified CSS into readable style sheets.

HTML Minifier

Live

Strip comments and collapse whitespace to shrink HTML payload size.

JavaScript Minifier

Live

Compress JavaScript by removing comments and unnecessary whitespace.

JSON Minify

Live

Minify JSON by removing whitespace and newlines.