Minify CSS Online — Free CSS Minifier

Minify CSS code instantly with our free online tool. Select, reorder, concatenate and minify multiple .css files as one bundle with your current options. All processing happens in your browser.

Loading…

CSS Minification

Minify CSS online with CSSO. Compress stylesheets for production — instant browser processing.

Features

Reduce the size of your CSS code by removing spaces, comments and unnecessary characters.

Minify

Reduce the size of your CSS code by removing spaces, comments and unnecessary characters.

Package used

CSSO

v5.0.5

CSSO (CSS Optimizer) is a powerful tool for optimizing CSS files by removing redundancies and compressing code.

Basic example

Input CSS

.container {
  margin: 20px;
  padding: 10px;
  background-color: #ffffff;
}

.button {
  color: #000000;
  font-size: 16px;
  border: 1px solid #cccccc;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

Minified CSS

.container{margin:20px;padding:10px;background-color:#fff}.button{color:#000;font-size:16px;border:1px solid #ccc}.card{display:flex;flex-direction:column;gap:12px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.12)}

CSS optimization guide

What CSS minification does

CSS minification rewrites a stylesheet into a shorter form that still paints the same. Selectors, cascade, and class names stay the contract with your HTML — a minifier does not rename .header the way JavaScript mangling shortens local variables. The output is still CSS, not a zip: denser source, not an encoded archive. Typical handwritten stylesheets often shrink by 20–40% of the original bytes before gzip or Brotli. Those extra bytes on the wire are a different layer; gzip and Brotli still matter after deploy. Minification is not unused-CSS removal. PurgeCSS, Tailwind’s content scan, or similar pipelines drop rules your markup never uses — that is a build step, not this tool. See tree shaking vs minification and the CSS minification guide. It is not critical-CSS extraction either: pulling above-the-fold rules, inlining them, then loading the rest asynchronously is a separate workflow. This page minifies whatever CSS you paste, including a critical block you already extracted. Compiling SCSS or LESS is a different tool. FastMinify’s HTML minifier does not run CSSO on style elements or inline style attributes — it preserves that CSS while collapsing markup.

How FastMinify minifies CSS

This page runs CSSO (CSS Optimizer) entirely in your browser. CSSO parses with CSSTree, compresses (shorter colors, 0px → 0, dropped comments when you ask), then optionally restructures rule blocks. The toolbar has two minify controls. Compression Level maps to CSSO’s restructure and merge flags. Conservative turns restructuring off and then re-inserts line breaks so the result stays readable — the safest preview, not the smallest file. Normal minifies and merges without rewriting cascade order. Aggressive enables restructure, which can merge and split rulesets; that is smaller, but source-order assumptions can shift. Leave Aggressive off if you rely on delicate cascade. Remove Comments is the other switch. On (the default), comments are dropped. Off, FastMinify keeps comment text by replacing the CSSO result with a whitespace-collapsed copy of your source — you keep /* */ at the cost of weaker size wins. CSSO still shortens colors, adjacent duplicate selectors, and selector whitespace on its own; those are not toolbar toggles. Paste-and-minify is for a file or a few files; concatenation on this page merges files first, then runs the same pipeline. Production apps still belong in the build. For Webpack, Vite, or CI, see the CSS minification guide.

Minification options

Compression Level

Controls the aggressiveness of CSS compression

ConservativeConservative — no merge or restructure; output is re-indented for readability

NormalNormal — minify and merge, keep cascade order

AggressiveAggressive — restructure rulesets; smaller, but source order may change

Remove Comments

Removes all CSS comments from code

Comparison with/without option:

Original code

/* Header styles */
.header {
    background: #fff;
    padding: 20px;
}

/* Navigation */
.nav { display: flex; }

With removeComments: true

.header{background:#fff;padding:20px}.nav{display:flex}

With removeComments: false

/* Header styles */.header{background:#fff;padding:20px}/* Navigation */.nav{display:flex}

Difference

CSS comments are removed

What CSSO does automatically

These are not extra toolbar switches. Color shortening and selector compacting run with CSSO; merging adjacent rules follows Compression Level (off on Conservative).

Shorter color values

Named, hex, rgb(), and hsl() colors are rewritten to a shorter equivalent when CSSO can prove it is safe.

Source

.button {
    background: #ff0000;
    color: rgb(255, 255, 255);
    border: 1px solid hsl(0, 100%, 50%);
}

After CSSO

.button{background:red;color:#fff;border:1px solid red}

Adjacent identical selectors

Two blocks with the same selector can be merged into one on Normal and Aggressive. Conservative keeps them separate.

Source

.header {
    background: #fff;
    padding: 20px;
}
.header {
    margin: 10px;
}

After CSSO

.header{background:#fff;padding:20px;margin:10px}

Selector whitespace

Combinators and whitespace around selectors are compacted. Class and ID names themselves are not renamed.

Source

div.container > ul li:first-child {
    color: red;
}

div.container > ul li:last-child {
    color: blue;
}

After CSSO

div.container>ul li:first-child{color:red}div.container>ul li:last-child{color:blue}

See Beautify indentation options →

Learn more about this action →

Concatenating CSS Files

On Minify CSS, select or drop multiple .css files, reorder them, then concatenate and minify the complete bundle once with your current options. Processing stays in your browser. Optional file markers, comments and extra spacing are added before minification and may be removed from the final output.

Frequently Asked Questions — Minify

Everything about minification

Why minify CSS?

Minification removes whitespace, comments and redundant rules. Typical savings are 20–40% of the original bytes before gzip, with identical rendering.

Need to unminify CSS?

Use our CSS unminifier to restore readable formatting.

Need to beautify CSS?

Use our CSS beautifier for consistent stylesheet formatting.

Is my CSS processed securely?

All processing runs in your browser — nothing is uploaded.

How do I concatenate and minify multiple CSS files?

On Minify CSS, use the concat button or drop two or more .css files on the input panel, reorder them, then concatenate and minify the complete bundle once with your current options. Everything runs in your browser. This workflow is not available on Beautify CSS or Unminify CSS, and file markers, comments or extra spacing may be removed during minification.

Verify it yourself

FastMinify processes your input in the browser. Inspect the network panel or read our validation gate to confirm nothing leaves your device.

Open the validation gate →

Minify

Shrink code and assets for production — minify JavaScript, CSS, HTML, JSON and XML before gzip or CDN deploy.

Minify JS

Minify JSON

Minify HTML

Minify XML

Minify SVG

Minify SQL

Minify YAML

Minify TOML

Explore other tool categories

Beautify

Make code readable with consistent indentation — beautify JavaScript, CSS, TypeScript, SCSS, LESS, Markdown, GraphQL, SQL, YAML and more in your browser.

Unminify

Expand minified or compressed code — unminify JavaScript, CSS, TypeScript, SCSS, LESS, SQL, YAML and other formats when debugging or reviewing.

Conversion

Transform data between JSON, YAML, XML and CSV locally — no server uploads.

CSS preprocessors

Compile SCSS or LESS to standard CSS in the browser — pair with beautify or minify for a full stylesheet workflow.

JSON Tools

Validate, format, diff and explore JSON payloads — complementary to minifiers and converters.

SVG Tools

Preview, optimize with SVGO, export Data URI, resize, beautify, convert to JSX and validate SVG — all in your browser.

DevOps & Infra

Terraform HCL format/validate/minify, Dockerfile format & lint, Docker Compose and .env validation.

CI/CD

GitHub Actions and GitLab CI — format YAML and check workflow/job structure in your browser.

Logs & observability

Line-oriented JSON/NDJSON and Nginx/Apache access logs — format, filter, validate, and CSV/TSV.

Kubernetes

Multi-doc manifests, structural validate, Ingress/Deployment starters, and Helm values formatting.

Networking / IP

CIDR, subnets, and IPv4/IPv6 helpers — in your browser.

Security & tokens

JWKS, X.509 certificates, and secrets scan — browser-local.

API & schemas

OpenAPI tools to format, validate, and lint your specs.

HTTP Tools

Paste-local cURL, HTTP messages, and URLs — format and inspect in your browser, never sent.

Encoding

Encode or decode Base64, URL components and HTML entities — client-side only.

Developer utilities

Timestamps, UUID, ULID, Nanoid, cron, passwords, regex, slugify, number bases, case, text diff, and chmod — all client-side.

Text & Markdown

Count words, build Markdown TOCs, and clean line lists — all in your browser.

AI & LLM

Token counting, pricing estimates, and context-window fit — 100% browser-local.

Test Data

Synthetic field values for fixtures and DB seed — reserved-range phone numbers first.

Serialization

Serialize and deserialize PHP data structures beside JSON workflows.