CSS Minifier — Keeps License Comments and CSS Variables Intact

Introduction

Written CSS and delivered CSS don't need to look the same. While you're working on a stylesheet, indentation, blank lines between rules, and comments explaining why a rule exists all make the code easier to read and maintain. None of that helps a browser render the page — a browser only needs valid selectors, properties, and values, and doesn't care about spacing or whether a rule is explained. Minifying strips out everything that exists purely for a human reader, so the same rules reach the browser in a smaller file. For a short stylesheet the saving might be a few kilobytes; for one built up over a longer project, with several rounds of edits and comments left behind from testing, it can be a meaningful cut in what has to download before the page renders correctly.

How This Tool Minifies Your CSS

Pasting CSS in and clicking Minify does more than delete spaces:

• Comments are removed, with one exception. A comment written using the common /*! ... */ convention, or containing the word @license or @preserve, is kept. This is the standard way to mark a comment as a license or attribution notice that shouldn't be stripped by build tooling. An ordinary explanatory comment like /* button hover state */ will be removed — if you need to keep a license header, write it in one of those forms.
• Whitespace, line breaks, and empty rules are removed. Anything not needed to separate one token from another is stripped, and a leftover empty rule block (a selector like .old-banner {} with nothing inside it) is deleted entirely rather than kept as dead weight.
• Some values are shortened without changing what they mean. A color written as #ffffff becomes #fff, redundant zeros are trimmed (0.500 becomes .5, a value like -0px becomes 0), and the keywords normal and bold used for font-weight are converted to their numeric equivalents, 400 and 700.
• CSS custom properties and calc() expressions are protected. Variables defined with a -- prefix (for example --brand-color) and calc() expressions rely on punctuation and spacing that would break if they were compressed the same way as an ordinary value, so they're set aside before the whitespace and zero-shortening steps run and restored afterward untouched.

What to Know Before You Minify

This tool doesn't reorder, merge, or deduplicate your rules — the output has the same selectors in the same order, just compacted. If you're looking for something that removes CSS your page doesn't actually use, that's a different kind of tool than a minifier. Because minification here works by stripping whitespace and shortening values rather than reinterpreting rule structure, nested content like the rules inside an @media query is left in place, with its contents compacted the same way as everything else.

There's no separate file-size limit the way the file-upload tools on this site have — you're pasting text directly rather than uploading a file, so the practical ceiling is whatever your browser comfortably handles in a text field, which covers any stylesheet you'd realistically be working on by hand. For a genuinely large stylesheet, such as a full framework bundle rather than a page or project's own styles, a build step that runs as part of your deployment process is usually a better fit than pasting it into a browser tool.

Minification here doesn't change what your CSS does, but it's still worth a quick look at a page using the minified output before you publish or submit it — the same habit as proofreading anything else before it goes out.

When This Is the Right Tool

• Preparing a class project or personal site for publishing. A smaller CSS file loads faster, which matters more than it might seem on a school network or a phone on mobile data.
• Seeing what production code actually looks like. Viewing the source of a real website often shows CSS that looks nothing like what students write in class — minifying your own stylesheet and comparing it side by side with the original is a concrete way to see why, and pairs naturally with CSS Beautifier for the reverse direction.
• Cutting page weight before a deadline or bandwidth-limited hosting situation. Some school-provided hosting has tight storage or transfer limits; minifying assets before upload is a quick way to stay under them.

If you're still actively editing a stylesheet, keep working with the readable version and minify only once, right before publishing — minifying is a last step, not a working format.

Example

A student finishes a personal website for a web-design class: separate stylesheets for layout, color theme, and responsive rules, each with comments left over from testing different ideas along the way. Before submitting the project, they combine and paste the CSS into this tool. The page looks and behaves exactly the same afterward, but the file that ships with it is smaller and no longer includes the trial-and-error comments written while building it.

FAQs

Will minifying change how my page looks?

No. The rules, selectors, and values are preserved — only formatting, comments, and a handful of value shortenings (like hex colors and redundant zeros) change, none of which affect rendering.

What happens to comments in my CSS?

Ordinary comments are removed. A comment written as /*! ... */, or containing @license or @preserve, is kept — this is the standard convention for marking a license or attribution notice.

Does it handle CSS variables and calc()?

Yes. Custom properties and calc() expressions are protected during minification rather than compressed like ordinary values.

Is there a size limit?

No fixed limit like the file-upload tools on this site — you're pasting text, not uploading a file. Very large pastes (a full library bundle, for example) are better handled by a build tool as part of your deployment process.

Is my code saved anywhere?

No. The pasted CSS is processed to produce the minified result and isn't stored as a file or kept afterward; only the fact that the tool was used is recorded, not the code itself.

Can I minify more than one stylesheet at once?

Paste and minify one block of CSS at a time. Combine multiple files first if you need them minified together, or repeat the process for each one.

Which related tools can I use?

Use CSS Beautifier to reverse the process and make minified CSS readable again, or HTML Minifier and JavaScript Beautifier for other code tasks.