Skip to content
YAS.SH
Developer🌐 YAS server-sideAPI availablebeginner

CSS Minifier

Minifies or beautifies CSS to reduce size or improve readability.

Processed by YAS · not stored
Ready to runInstant execution
All tools →
Loading tool…

What does this tool do?

Minifies or beautifies CSS to reduce size or improve readability.

Why would I use it?

  • You want to shrink CSS before shipping to production.
  • You want readable formatting for debugging minified CSS.
  • You are auditing stylesheet size.

Real-life example

Input
body { color: red; margin: 0px; }
Output
body{color:red;margin:0}

Whitespace and redundant units are removed.

Input → Process → Output → Next

Input
Paste CSS.
Process
YAS parses and re-emits minified or beautified CSS.
Output
The transformed CSS plus byte savings.
Next action
Compare the savings; keep a source copy for editing.

Common mistakes

  • Minifying without keeping the original source.
  • Expecting advanced optimizations (merge, dedupe) — this is whitespace-level.
  • Breaking CSS custom properties with aggressive removal.

What the result means

Minified CSS is functionally identical with reduced whitespace.

Privacy & security

Your input is sent to YAS infrastructure because the tool requires server-side processing or public network queries. Input is not stored.

API

Endpoint
POST https://yas.sh/api/v1/tools/css-minifier
Request Header
Content-Type: application/json
cURL
curl -X POST "https://yas.sh/api/v1/tools/css-minifier" \
  -H "Content-Type: application/json" \
  -d '{"input":"body { color: red; }","mode":"minify"}'
JavaScript
const res = await fetch("https://yas.sh/api/v1/tools/css-minifier", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
  "input": "body { color: red; }",
  "mode": "minify"
}),
});
const data = await res.json();
Python
import requests

r = requests.post("https://yas.sh/api/v1/tools/css-minifier", json={"input":"body { color: red; }","mode":"minify"})
data = r.json()
FieldTypeRequiredDescription
inputstringYesCSS text
modestringNo (default minify)minify | beautify
Success response
{ "result": "body{color:red}", "mode": "minify", "savings": 9 }

Minify or beautify CSS (mode: minify | beautify).

Error responses
  • 400 VALIDATION_ERROR — invalid input or unsupported option.
  • 413 PAYLOAD_TOO_LARGE — input exceeds the 64 KB limit.
  • 429 RATE_LIMIT_EXCEEDED — rate limit exceeded (60 req/min).
Limits
  • Maximum input: 64 KB per request.
  • Rate limit: 60 requests/min per IP address.
  • Authenticated accounts benefit from higher tier quotas.

CSS Minifier: technical reference, use cases and FAQ

How CSS Minifier works

Minification tokenises the stylesheet and re-emits it without the bytes that carry no meaning to the parser: comments, whitespace between tokens, the final semicolon in a block, leading zeros in decimals (0.5em → .5em), and redundant units on zero values (0px → 0). Colour literals are shortened where an equivalent shorter form exists — #ffffff to #fff — and quotes are removed from url() where the target needs no escaping.

None of these transformations reorder or merge rules, and that restraint is intentional. Merging duplicate selectors or dropping apparently-overridden declarations changes cascade behaviour whenever specificity, source order or a later stylesheet is involved. A minifier that is safe is one that only removes bytes the CSS grammar treats as insignificant.

When to use it: real-world scenarios

Shrinking a stylesheet before shipping without a build step

A landing page or email template served without a bundler still benefits from minification. Typical savings are 15–25% before compression.

Beautifying a minified third-party stylesheet

Reading a vendor's compiled CSS to find which rule is overriding yours is far easier once the file has line breaks and indentation.

Inlining critical CSS into the document head

Above-the-fold CSS inlined as minified text removes a render-blocking request. Keep it small — every byte is uncached and repeated on every page load.

Comparing two builds byte-for-byte

Normalising both files through the same formatter makes a diff show real rule changes instead of formatting noise from different toolchains.

Pro tips

  • Gzip and Brotli already collapse repeated whitespace efficiently, so minification typically saves far less over the wire than the raw byte count suggests. Measure compressed size, not file size.
  • Preserve licence comments (/*! ... */) — many minifiers keep this form specifically because removing it can breach the licence terms of the code you are shipping.
  • Minify last, after autoprefixing and any PostCSS transforms. Running it first can hide the hacks a prefixer needs to see.
  • Keep a source map or the unminified original in version control. Debugging a production CSS issue against minified output is avoidable pain.

Limitations and edge cases

What this tool deliberately does not do, and where it will disagree with other implementations.

  • No dead-code elimination. Unused selectors remain, because determining what is unused requires knowing every page's markup.
  • No rule merging, deduplication or shorthand collapsing — these can alter the cascade and are deliberately out of scope.
  • CSS custom properties are preserved verbatim, including whitespace inside their values, because their value is a token stream that may be parsed by JavaScript.
  • Hacks that rely on specific whitespace or comment placement (legacy IE filters, the star hack) may stop working.

Frequently asked questions

How much smaller will my CSS get?
Usually 15–25% of raw bytes. After Brotli or gzip the marginal gain is much smaller — often under 5% — because compression already handles the redundancy minification removes.
Will minifying break my styles?
It should not: only insignificant bytes are removed and no rules are reordered. The exception is CSS relying on parser hacks or exact whitespace, which is rare in modern stylesheets.
Does it remove unused CSS?
No. That requires scanning your HTML and JavaScript to know which selectors are reachable — a job for PurgeCSS or your bundler, not a minifier.
Can I get my original file back?
Beautifying restores readable formatting but not comments or your original line breaks, since those bytes are gone. Keep the source in version control.
Ask YAS AI
🍪 Cookies & privacy. Essential cookies keep you signed in and remember language and theme. Google AdSense and reCAPTCHA are Google technologies: AdSense runs only after Accept All; reCAPTCHA loads on sign-in and contact forms. See how Google uses data: https://policies.google.com/technologies/partner-sites cookie policy · privacy policy.
Settings