Shiklo Tools
PDF40
Image20
Calculators & Converters25
Text & Writing13
Developer26
Video14
Audio14
Document14
Data & Spreadsheet12
Web & SEO9
OCR & Scanning5
Archive & File12
Security & Privacy23
Health & Medical29
QR & Barcode5

CSS Minifier

Minify CSS: remove comments and whitespace, drop empty rules and redundant semicolons — safely, without changing how it works.

Every byte of CSS has to be downloaded and parsed before a page can render, so smaller stylesheets mean faster pages, especially on mobile connections. The CSS Minifier removes everything the browser doesn't need — comments, indentation, line breaks, spaces around punctuation, the last semicolon in each block, empty rules and leading zeros — while keeping your styles working exactly as before.

It is deliberately careful. Spaces that change meaning are kept: the space in a descendant selector such as .card :hover, the space before a parenthesis in a media query such as screen and (max-width…), and the spaces around plus and minus inside calc(). Strings and url() values are copied exactly. Licence comments that start with /*! can be kept. The tool shows how much smaller the result is, and nothing is uploaded.

How to use CSS Minifier

  1. Paste your CSS, open a .css file, or press Sample.
  2. Choose whether to keep /*! licence comments.
  3. The minified CSS appears as you type, with the size saved.
  4. Copy it or download it as a .min.css file.

Features

  • Removes comments, whitespace and line breaks.
  • Drops empty rules and the last semicolon of each block.
  • Shortens 0.5 to .5.
  • Keeps meaningful spaces in selectors, media queries and calc().
  • Strings and url() values are kept exactly.
  • Optionally keeps /*! licence comments.
  • Shows the size saved; runs in your browser.

Where minified CSS helps most

Render-blocking stylesheets delay the first paint of a page, so trimming them improves loading metrics such as First Contentful Paint. Inline critical CSS in the page head, CSS embedded in HTML emails and snippets pasted into website builders all benefit, because they are not compressed separately by the server.

What the minifier removes

Minification is about removing characters the browser ignores. The table shows the changes this minifier makes. Each one is safe for any valid stylesheet.

Removed or shortenedExample
Comments/* Buttons */ is removed
Indentation and line breaksRules joined onto one line
Spaces around braces, semicolons, commas and child or sibling combinators.a , .b { color: red; } becomes .a,.b{color:red}
Last semicolon in a blockcolor:red;} becomes color:red}
Empty rules.unused { } is removed
Leading zero0.5em becomes .5em

Safe by design

Aggressive minifiers sometimes break stylesheets by removing spaces that matter. In CSS, .card :hover (any hovered element inside a card) is different from .card:hover (the card itself when hovered); and @media screen and (max-width: 600px) stops working if the space before the parenthesis disappears. calc(100% - 2rem) needs the spaces around the minus sign. This minifier keeps all of these, never touches strings or url() values, and does not attempt riskier rewrites such as merging rules, reordering properties or changing colour formats. You get most of the savings with none of the surprises.

Minify, compress, or both?

How much minification saves depends on how many comments and how much whitespace a stylesheet contains; the tool shows the exact saving for yours. Servers then usually compress files with gzip or Brotli for transfer, which reduces size much further; minified and compressed files are smaller still than compressed ones alone. For production sites, minify as part of your build process so it happens automatically. This tool is ideal for quick jobs: a theme tweak, a CSS snippet for an email or widget, a WordPress custom CSS box, or checking how much a stylesheet would shrink.

Keep a readable copy

Always keep your original, readable stylesheet and minify a copy for publishing — minified CSS is hard to edit. If you need to read a minified stylesheet, the CSS Formatter lays it out again with one declaration per line. Licence comments that begin with /*! are kept by default, because many open-source licences require the notice to stay with the code. If the CSS contains an unclosed comment or string, the minifier stops and shows where, instead of producing broken output.

Frequently asked questions

How do I minify CSS?

Paste the CSS or open a file; the minified version appears immediately. Copy or download it.

Will minifying break my CSS?

No. Only characters the browser ignores are removed, and meaningful spaces are kept.

How much smaller will my CSS be?

It depends on the comments and whitespace in your file; the tool shows the exact saving as a percentage.

Are licence comments kept?

Yes, comments starting with /*! are kept unless you turn the option off.

Can I unminify CSS later?

Use the CSS Formatter to make minified CSS readable again; removed comments cannot be restored.

Is my CSS uploaded?

No. Minification runs in your browser.

Related tools