Skip to content
🛠️
Whiz Tools

CSS Minifier: Compress and Optimize CSS Code Online

Free online CSS minifier that removes comments and whitespace, then shortens hex colors. Typical size reduction is 20 to 40 percent. Runs in your browser.

CSS Minifier

Paste CSS to remove comments and extra whitespace and shorten a few common patterns, such as long hex colors. Typical reduction is 20 to 40 percent.

0 characters
0 characters

About CSS Minification

CSS minification removes unnecessary characters from CSS files without changing how the page renders. This reduces file size and can speed up page loading.

  • Removes comments, whitespace, and line breaks
  • Removes duplicate semicolons and the unit from zero-length values, such as 0px to 0
  • Shortens six- and eight-digit hex colors when every digit pair matches, such as #ffffff to #fff
  • Produces a smaller file that can load faster
Loading calculator...
📚

Documentation

What Is a CSS Minifier?

A CSS minifier is a tool that shrinks a CSS (Cascading Style Sheets) file by stripping out characters that browsers do not need. It removes comments, extra spaces, and line breaks, and shortens a few common patterns, without changing how the page looks. The result is a smaller file that a browser can download and parse faster.

How CSS Minification Works

Web developers write CSS with comments, indentation, and blank lines because those things make the code easier to read and edit. Browsers ignore all of that formatting. A minifier deletes it, along with a handful of other bytes that serve no visual purpose, and leaves a compact file meant for production use rather than editing.

This tool applies the following changes:

  • Removes comments. Every /* ... */ block is deleted.
  • Collapses whitespace. Runs of spaces, tabs, and line breaks between rules are reduced to nothing, or to a single space where a space is meaningful (for example, between .parent and .child in a descendant selector).
  • Strips whitespace around punctuation. Spaces next to {, }, :, ;, and , are removed.
  • Removes extra semicolons. Repeated semicolons collapse into one, and the final semicolon before a closing } is dropped.
  • Shortens hex colors. A six-digit color like #ffffff becomes #fff when each pair of digits matches (red, green, and blue). An eight-digit color with alpha, such as #ffaa00cc, is shortened the same way when all four pairs match.
  • Drops the unit from zero-length values. 0px, 0em, and 0rem become 0. Percent values are left alone, because 0% is not always interchangeable with plain 0 (in a flex-basis or a @keyframes step, for instance).
  • Removes a leading zero from decimals. 0.5 becomes .5.

To avoid corrupting the file, the tool leaves three kinds of content untouched: text inside quotes, the value inside an unquoted url(), and the contents of math functions such as calc(), clamp(), min(), and max(). Spacing inside calc(100% - 20px) matters to the browser, so the tool preserves it exactly.

The tool does not merge duplicate selectors, delete empty rule blocks, or convert rgb() colors to hex. Those are valid optimizations other tools perform, but this minifier focuses on the changes listed above.

The Reduction Percentage Formula

The tool reports how much smaller the file became as a percentage:

1reduction % = ((original length − minified length) / original length) × 100
2

Both lengths are counted in characters. The result is rounded to two decimal places.

Worked Example

Original CSS (193 characters):

1/* Navigation Styles */
2.nav-menu {
3  display: flex;
4  justify-content: space-between;
5  padding: 20px 0px;
6  background-color: #ffffff;
7}
8
9.nav-item {
10  margin-right: 15px;
11  color: #000000;
12}
13

Minified output (129 characters):

1.nav-menu{display:flex;justify-content:space-between;padding:20px 0;background-color:#fff}.nav-item{margin-right:15px;color:#000}
2

Applying the formula: (193 − 129) / 193 × 100 = 33.16%. The comment is gone, the indentation and line breaks are gone, 0px became 0, and #ffffff/#000000 became #fff/#000.

The exact percentage depends on the input. Tightly written CSS with few comments shrinks less. Heavily commented, deeply indented CSS can shrink by more. Typical stylesheets minified with this tool see a reduction of roughly 20% to 40%.

How to Use This Tool

  1. Paste CSS code into the input box on the left.
  2. The minified version appears on the right automatically, with no button to press.
  3. Check the reduction percentage shown above the output.
  4. Select "Copy to Clipboard" to copy the minified CSS, then paste it into a project file.
  5. Select "Clear" to erase both boxes and start over.

Nothing typed into the tool is sent to a server; the minification runs in the browser.

When to Minify CSS

Development teams commonly minify CSS as a step in their build process, using tools such as Webpack or npm scripts, so that the change happens automatically before each deployment. The readable, commented source file stays in version control; only the production build is minified. Common places minified CSS is used include:

  • Large websites, such as online stores, where a smaller stylesheet means a faster-loading page.
  • Single-page applications built with frameworks like React or Vue, where CSS is bundled alongside JavaScript.
  • Mobile web pages, where users are more likely to be on a slower connection.
  • HTML emails, which often have strict size limits.

CSS Minification and Page Speed

A smaller CSS file downloads and parses faster, which can shorten the time before a page becomes visible. Google has stated that page speed is one of the signals used in search ranking, so a faster page can be one small factor among many in how a site performs in search results. Minification alone does not guarantee a ranking change; it is one optimization among several, including image compression and server response time.

CSS Minifier vs. CSS Beautifier

A minifier compresses code for production. A beautifier does the reverse: it takes compressed CSS and reformats it with indentation and line breaks so a person can read it again. A beautifier cannot restore comments or original variable names that were removed during minification, because that information is gone once deleted.

Frequently Asked Questions

How much smaller does CSS get after minification? With this tool, typically 20% to 40%, depending on how many comments, blank lines, and indentation the original file has. A file with little formatting to begin with will shrink less.

Does minifying CSS change how a page looks? No. Minification only removes characters that browsers ignore, such as comments and extra whitespace, and rewrites a few equivalent values (like #ffffff to #fff). The rendered page stays the same.

Should CSS be minified during development? No. Keep the readable, commented version while writing and debugging code. Minify only the copy that goes to a production server, usually as an automatic step in the build process.

Can minified CSS be turned back into the original file? A beautifier can reformat minified CSS with indentation, but it cannot recover deleted comments or restore descriptive names that were never present in the minified version. Keep the original source file.

Does this tool convert rgb() colors to hex, or merge duplicate selectors? No. It shortens hex colors and removes unnecessary characters, but it does not rewrite rgb()/hsl() values or merge repeated selectors. Some other minifiers perform those extra steps.

Is minification the same as gzip compression? No. Minification removes unneeded characters from the source code itself. Gzip (or Brotli) compression is applied by the web server when the file is sent, using a separate algorithm. Using both together produces the smallest file over the network.