CSS Minifier

CSS Full Form

CSS stands for Cascading Style Sheets - the language browsers use to style HTML. CSS source files are written with generous whitespace, comments, and readable formatting. Browsers don't need any of that to apply your styles, so minification strips it all away to produce a smaller, faster-to-download stylesheet.

What this tool does

• Strip comments - Removes /* ... */ comments (license blocks starting with /*! are preserved).
• Collapse whitespace - Removes indentation, newlines, and redundant spaces around {, }, ;, ,, after a property's :, and around the >, + and ~ combinators in selectors.
• Drop redundant tokens - Removes the trailing semicolon before }, collapses duplicate semicolons.
• Shorten values - Zero lengths collapse (0px -> 0), hex colors shorten where safe (#aabbcc -> #abc). Percentages, values inside brackets such as calc(), the flex shorthand and custom properties are left alone, because a bare 0 can mean something different there.
• Byte savings - See original vs minified byte counts and percentage saved.

When you need a CSS minifier

• Production builds - Smaller CSS files download faster and parse faster.
• Critical CSS - When inlining above-the-fold styles in your HTML <head>, every byte counts.
• Email templates - Most email clients need CSS inlined; minifying keeps the payload under provider size limits.
• Embedded CSS - When you're pasting CSS into a JSON config, database row, or server-side template.

How to use it

1. Paste a stylesheet into Input CSS, click Upload File to open a .css file, or click Load Sample.
2. The minified CSS appears on the right as you type. Click Minify if you want to run it again.
3. Check the stats line for the original size, the new size and the percentage saved.
4. Click Copy, or Download to save the result as minified.css.
5. Click Beautify to expand compressed CSS into one declaration per line, which is handy for reading a third-party stylesheet.

A worked example

This 80-byte rule:

/* Buttons */ .btn { padding: 0px 16px; color: #ffffff; margin: 0 auto; }

(written over several lines in a real file) becomes .btn{padding:0 16px;color:#fff;margin:0 auto}, which is 45 bytes, a saving of about 44%. The comment is gone, 0px is now 0 because a zero length needs no unit, #ffffff is now #fff, and the last semicolon before the closing brace has been dropped. The space in 0 auto stays, because removing it would change the value.

Spaces it keeps on purpose

The minifier reads the stylesheet token by token, so it knows where strings, comments, url() values and selectors start and end. Some spaces look redundant but change the meaning, so they stay:

• Maths inside calc() - calc(100% + 10px) keeps its spaces, because + and - inside calc(), min(), max() and clamp() must have spaces around them or the browser rejects the value.
• A space before a pseudo-class - .menu :hover (any hovered element inside .menu) stays as written, and is never joined into .menu:hover (the menu itself).
• Text inside quotes - strings are copied byte for byte, so content: "a : b" keeps every space.
• Zero percentages - 0% is never shortened, so colour functions such as hsl(120, 0%, 50%) and @keyframes steps such as 0% stay valid.

The result applies exactly the same rules as your original. The tool does not merge rules or reorder properties; for those extra savings use a build tool such as cssnano or Lightning CSS.

Privacy

Everything runs locally in your browser. Your CSS is never sent to our servers, not even for analytics. You can minify proprietary design tokens, unreleased themes, or internal enterprise styles without them leaving your machine.