TinySandyFree Online Tools

CSS Minifier

Make a stylesheet smaller by removing comments, indentation, line breaks and the spaces CSS never needs, such as the space after a colon or around braces. The minifier is deliberately conservative: it keeps the spaces inside calc(), leaves strings and url() values untouched, and does not merge or reorder rules, so the cascade stays exactly as you wrote it.

Format & Validate Runs in your browser

Minify Your CSS

How to Use the CSS Minifier

  1. Paste your CSS into the box.
  2. Leave Keep /*! important */ comments ticked to preserve licence banners.
  3. Press Minify.
  4. Check the size saved, then copy or download minified.css.

About This Tool

Developers who want a smaller stylesheet without installing a build tool, and site owners trimming page weight for speed.

Input: CSS  ·  Output: Minified CSS (.css).

Features and Limitations

Features

  • Removes comments, indentation and redundant spaces, and the last semicolon before a closing brace.
  • Keeps required spaces: calc(1px + 2px), selectors such as .a .b and :is() lists, and values such as 0 -1px.
  • Strings, url() (including base64 data URIs) and custom properties are never changed.
  • Shortens a leading 0.5 to .5 and shows the size saved. No rule merging, so nothing is reordered.

Limitations

  • Only whitespace and comments are optimised. It does not shorten colours, remove units from zero values, merge rules or remove unused CSS, so tools such as cssnano or csso may save more.
  • Invalid CSS is minified as written; only unbalanced braces, parentheses, quotes or comments are reported.
  • Whitespace inside custom property values is collapsed to single spaces.
  • Please test the result on your site before deploying it.
  • Results are computed in your browser; nothing you enter is sent to a server.

Example

.card > h1 { color: #fff; margin: 0.5em 0; } becomes .card>h1{color:#fff;margin:.5em 0}, saving about 23 percent.

Frequently Asked Questions

Will minifying change how my site looks?

It should not. Only comments and whitespace that CSS ignores are removed, and spaces that matter, for example inside calc() or between selectors, are kept.

Why is the saving smaller than with other minifiers?

Advanced minifiers also merge rules, shorten colours and drop unused declarations. Those changes can alter the cascade, so this tool does not do them.

What does keeping /*! comments do?

Comments that start with /*! are conventionally licence or copyright notices. They are kept when the option is on.

Does it handle @media, @font-face and CSS variables?

Yes. At-rules, custom properties and url() data URIs pass through intact.

Can I make it readable again?

Yes, paste the result into the CSS Formatter.

Related Tools

More like this: all Format & Validate tools, all Developer & Web tools or the TinySandy home page.