Code Quality · Free CSS tool

CSS Gzip Size Estimator

Free · no sign-up Live preview · copy or download the CSS

What will users actually download? Paste your CSS and get three honest numbers — raw bytes, minified bytes, and real gzip bytes computed with the browser's native compression — plus the percentage story between them.

Settings

Results appear here.
Generated CSS — updates live


The CSS you need to build this yourself
Understand the output, not just copy it — these lessons on our learning path teach exactly what this tool automates:
STEP 1 · 20 minCSS Performance & Best PracticesRender-blocking CSS and why bytes matter.STEP 2 · 15 minHow to Add CSSExternal files, caching, delivery.STEP 3 · 25 minCSS Specificity & ArchitectureLean architecture keeps files small.


  1. CSS Minifier & FormatterDeveloper Tools
  2. CSS Comment RemoverCode Quality
  3. CSS Property SorterCode Quality
  4. Base64 Image Encoder for CSSDeveloper Tools
  5. CSS Sprite Sheet GeneratorDeveloper Tools


How it works


The gzip number is real, not estimated: modern browsers ship a native CompressionStream API, and this tool runs your CSS through actual gzip and counts the bytes — the same compression your server applies on the wire.


The interesting comparison is the last two bars. Gzip is excellent at repetitive text, so it already eats much of what minification removes — yet minify-then-gzip still wins, because minification deletes information (comments) compression must otherwise encode. Ship both.


Run the code — try it yourself
This page's style block is deliberately bloated with comments and repetition. Copy it into the estimator and see the four bars — then minify it with the Minifier and re-measure.


exercise.html — editable


Frequently asked questions
Why is my gzip size so much smaller than minified?
CSS is extremely repetitive — property names and values recur constantly, which is gzip's ideal diet. 70–85% total reduction is normal.
Does the server gzip automatically?
Most hosts enable gzip or brotli for text types by default; verify with the content-encoding response header in DevTools.
What about brotli?
Usually a few percent smaller than gzip; browsers can't generate it natively yet, so this tool reports gzip as the conservative baseline.


Keep going
Numbers end debates: measure, minify, measure again. The delivery theory — render-blocking, caching, request diets — lives in CSS Performance & Best Practices.
CSSmatic is a non-profit project, made by developers for developers.