handyman
Hazuu Tools

CSS Minifier

Compress your CSS by removing whitespace, comments, and unnecessary characters instantly.

Input CSS
Minified Output
Minified output will appear here...
info

About CSS Minifier

CSS Minifier is a free online tool that compresses CSS stylesheets by removing every character the browser does not need: whitespace, line breaks, developer comments, and the trailing semicolons before closing braces. The resulting single-line output is byte-for-byte equivalent to the original — the browser applies every selector, property, and value identically — but the file is significantly smaller.

The tool is designed for the moment just before deployment. You write and maintain readable, well-commented CSS during development, then run it through the minifier once to produce the production file. It also accepts .css file uploads, displays the exact byte savings as a percentage, and lets you download the output as a ready-to-use minified.css file. Unlike a CSS formatter, which adds whitespace and indentation to make code easier to read, this tool does the opposite: it strips those characters to make the file faster to transfer.

All minification runs entirely inside your browser — your stylesheet is never uploaded to a server, sent to an API, or stored anywhere. This means you can safely minify proprietary theme files, client stylesheets, or internal design-system code without any data leaving your machine. The tool is free to use with no account required and no limit on file size or number of runs.

star

Key Features

check_circle

Comment stripping with a toggle

A checkbox lets you keep or remove /* */ comments independently. Useful when you need to preserve licence headers or source-map annotations in the output.

check_circle

Real-time byte-savings counter

After minification the tool shows original size, minified size, and the percentage saved so you can confirm the optimisation before deploying.

check_circle

File upload and download

Upload a .css or .txt file directly from disk and download the minified result as minified.css, skipping the clipboard entirely for large stylesheets.

check_circle

Trailing-semicolon removal

The last semicolon in each declaration block is redundant by spec and is removed, shaving extra characters from every rule.

check_circle

100% client-side processing

Minification runs in your browser using plain JavaScript. Nothing is sent to any server, so private or proprietary stylesheets stay on your own machine.

check_circle

Handles media queries and complex selectors

Spaces around combinators like >, ~, and + and inside @media rules are collapsed correctly, keeping complex selector logic intact.

help

How to Use

01

Paste Your CSS

Copy your CSS stylesheet and paste it into the input editor on the left.

02

Minify

Toggle the comment removal option if needed, then click "Minify" to compress your CSS.

03

Copy the Result

Review the size savings, then copy the minified CSS or download it as a .css file.

code_blocks

Example

Comments, whitespace, and the trailing semicolon before each closing brace are removed. Selectors, properties, and values are preserved exactly.

CSS input
/* Button styles */
.btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}

.btn--primary {
  background-color: #7c3bed;
  color: white;
}
Minified output
.btn{display:inline-flex;align-items:center;padding:10px 20px;border-radius:8px;font-weight:600;cursor:pointer}.btn--primary{background-color:#7c3bed;color:white}
lightbulb

Common Use Cases

  • arrow_circle_right

    Production deployment of hand-written stylesheets

    You write a custom stylesheet with full indentation and comments during development, then minify it once before committing the production file. The minified version loads faster and reduces bandwidth costs, especially on high-traffic pages.

  • arrow_circle_right

    Reducing CSS bundle size without a build tool

    Small projects, static sites, and email templates often do not have Webpack, Vite, or PostCSS configured. This tool provides one-click minification without any build-tool setup or npm install.

  • arrow_circle_right

    Auditing third-party CSS for size bloat

    Paste a vendor or framework stylesheet to see how much of its weight comes from whitespace and comments. The byte-savings counter tells you immediately whether minification is already applied or if there is room to reduce payload.

  • arrow_circle_right

    Preparing inline styles for CMS or email templates

    Email clients and some CMSs require CSS to be inlined or compressed into a single line. Minify a block of CSS rules before pasting it into a style attribute or template variable where newlines would break the syntax.

  • arrow_circle_right

    Comparing before and after a CSS refactor

    Minify both the old and new stylesheet and compare character counts to verify that a refactor genuinely reduced code — not just reordered lines — before shipping.

quiz

Frequently Asked Questions

What is CSS Minification? expand_more
CSS minification removes unnecessary characters from stylesheets — including whitespace, line breaks, comments, and trailing semicolons — without changing how the browser applies styles. The result is a smaller file that downloads and parses faster.
Will minifying break my styles? expand_more
No. The minifier only removes characters that are cosmetic for developers and not required by the browser. Your selectors, properties, and values remain unchanged, so styles render identically.
Is my CSS code secure? expand_more
Yes. All minification runs entirely in your browser using JavaScript. Your CSS never leaves your machine and is not sent to any external server.
How much can CSS minification save? expand_more
Typical savings range from 15% to 40% depending on comment density and formatting style. Well-commented, neatly indented stylesheets see the largest reductions.
How is CSS Minifier different from CSS Formatter? expand_more
CSS Formatter is the inverse operation: it adds indentation, line breaks, and consistent spacing to make minified or poorly formatted code readable for developers. CSS Minifier removes that same whitespace to make the file smaller for production. Use the formatter while developing and the minifier before deploying.
How is this different from HTML Minifier? expand_more
HTML Minifier compresses the markup of an HTML document — collapsing whitespace between tags and optionally inlining short scripts. CSS Minifier operates only on stylesheet syntax: selectors, properties, values, and at-rules. If you need to compress an entire HTML page including its embedded styles, you would run both tools separately.
Does the minifier support CSS variables and custom properties? expand_more
Yes. CSS custom properties such as --color-primary: #7c3bed are treated as regular declaration values. The minifier collapses surrounding whitespace without altering the property name or value.
Can I keep licence comment headers while removing other comments? expand_more
The current remove-comments toggle removes all /* */ comments. If you need to preserve a specific licence header, add it back manually as the first line of the minified output, or uncheck the toggle to keep all comments.
Does minification affect @media queries or CSS animations? expand_more
No. At-rules like @media, @keyframes, and @supports are standard CSS syntax and are handled correctly. Whitespace around the block boundaries is removed but the rule logic is preserved.
Is there a file size limit? expand_more
There is no imposed limit. Because everything runs locally in your browser, you can process large stylesheets with performance depending only on your device.