CSS Minifier

About this tool

This CSS minifier removes the parts of a stylesheet that exist only for human readers — comments, indentation, line breaks and the spaces around punctuation — so the file a browser downloads is smaller. It runs entirely in your browser using four pattern-matching passes, and nothing you paste is uploaded. Because it doesn't parse the CSS into a full syntax tree, it is fast and predictable, but it has a few blind spots worth knowing about before you ship the output.

How to use the CSS Minifier

1. Paste your CSS into the input box.
2. Click Minify — the result appears instantly, with the original size, minified size and percentage saved.
3. Copy the minified output and use it in place of your development CSS file, keeping the original for editing.

What the minifier actually does

Your CSS goes through four steps, in this order:

1. Comments are deleted. Everything from /* to the next */ is removed, including "important" comments that start with /*!, which some build tools keep for licence notices.
2. Whitespace collapses. Every run of tabs, line breaks and spaces becomes a single space.
3. Spaces around { } : ; and , are removed. margin : 0 ; becomes margin:0; and h1, h2 becomes h1,h2.
4. The last semicolon in each block is dropped, because ;} can always be written as }.

What it leaves alone matters just as much. Spaces that separate values — padding: 8px 16px, font: 12px/1.5 "Open Sans", serif, the spaces around the minus sign in calc(100% - 2rem), which CSS requires — are kept, as are selectors, property names, values, !important and at-rules such as @media. The tool never renames, reorders, merges or shortens anything, so #ffffff stays #ffffff. The size figures are counted in UTF-8 bytes, the same way a web server measures the file.

Worked example

Here is a small, conventionally formatted stylesheet of 265 bytes:

/* Buttons */
.btn,
.btn-primary {
  padding: 8px 16px;
  margin: 0 auto;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

/* Hover state */
.btn:hover {
  width: calc(100% - 2rem);
  color: #ffffff;
}

@media (max-width: 600px) {
  .btn { display: block; }
}

Minifying it produces this single line of 189 bytes, a 29% reduction:

.btn,.btn-primary{padding:8px 16px;margin:0 auto;font-family:"Helvetica Neue",Arial,sans-serif}.btn:hover{width:calc(100% - 2rem);color:#ffffff}@media (max-width:600px){.btn{display:block}}

Both comments, all the indentation and the final semicolon of each rule are gone, yet the space in 8px 16px, the quoted font name and the spaces inside calc() all survive. How much you save depends on how heavily the original is commented and indented; a file that is already compact will barely shrink.

Edge cases to check before you ship

Because the tool works on text patterns rather than on the structure of the CSS, there are three situations where the output can behave differently from the input:

• A space before a colon in a selector. Whitespace between selectors is the descendant combinator, so nav :hover (any hovered element inside a nav) is not the same as nav:hover (the nav itself when hovered). This tool removes that space and changes the selector. Write nav *:hover if you mean the descendant form.
• Text inside quotes. Strings are not protected. content: "a b" loses its double space, content: "a, b" becomes "a,b", and a string that contains /* … */ is treated as a comment and deleted. Quoted file names inside url() are affected the same way.
• Licence headers. If a library's licence requires its /*! … */ notice to stay with the code, paste it back at the top after minifying.

If your stylesheet contains none of these patterns, the minified version renders exactly like the original. A quick sanity check is to load a local copy of the page with the minified file swapped in and compare it with the original.

Common use cases

• Seeing how much of a stylesheet's size is formatting rather than actual rules
• Shrinking a small stylesheet for a static site that has no build step
• Producing a compact snippet for an email template, a CMS custom-CSS field or a <style> block in a single-file page

When to use something else

For a production site with a build pipeline, a parser-based minifier such as cssnano, Lightning CSS or clean-css is the better choice: it understands strings and selectors, can keep /*! comments, and adds optimisations like shortening colours and merging duplicate rules. Also bear in mind that most servers compress CSS with gzip or Brotli before sending it, so the saving on the wire is smaller than the raw byte saving shown here — whitespace compresses well. Whichever minifier you use, keep the commented original as your source and treat the minified file as build output. If you are tidying scripts as well, the JavaScript Minifier gives JS a similar light cleanup.

What this minifier leaves unchanged

The tool only removes characters that are pure formatting. It never rewrites a value, so a full parser-based minifier can often get extra savings from the same file. We ran this rule through the tool:

ul > li + li ~ p { margin: 0px 0.50em; color: #FFFFFF; }

It came out as:

ul > li + li ~ p{margin:0px 0.50em;color:#FFFFFF}

• Combinators keep their spaces. Only spaces around {, }, :, ; and , are removed, so the spaces around the child (>), next-sibling (+) and subsequent-sibling (~) combinators stay.
• Units and zeros are not shortened. 0px stays 0px and 0.50em keeps its leading and trailing zeros.
• Colors are not shortened. #FFFFFF is not rewritten as #fff.
• Nothing is merged or reordered. Two rules for the same selector stay as two rules.

This is intentional. Every change the tool makes is one that cannot alter how a normal rule is applied, apart from the selector and string edge cases described above.

The tool does not check your CSS

Minifying is not validation. If the input has a missing closing brace or a stray semicolon, the output has the same mistake, now on one long line where it is much harder to find. Fix errors in the readable version first, then minify. If you are not sure the source is clean, compare the page with the original and minified files before you replace anything.

Minified CSS for email and CMS fields

A common use for a quick minifier is pasting styles into a field with a character limit, such as a CMS custom-CSS box or an email template editor. Two points help. First, remember that all comments go, including notes you left for the next editor, so keep a commented copy somewhere else. Second, minifying changes only the size of the CSS, never which features an email program or CMS supports, so a rule that was ignored before will still be ignored. Test the minified snippet in the real destination before you rely on it.