Developer Tools · Free generator

CSS Minifier & Formatter

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

Two directions, one tool: strip your stylesheet to its smallest production form, or re-indent minified soup back into something humans can read. Instant, in-browser, with the byte savings counted.

Settings

Paste CSS on the left, press Minify for production or Beautify to restore readability. The result lands in the output box below — copy it or download it as a .css file.

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 · 15 minHow to Add CSSExternal stylesheets — the file you're shrinking.STEP 2 · 20 minCSS Syntax & SelectorsWhat's structure vs. what's whitespace.STEP 3 · 20 minCSS Performance & Best PracticesRender-blocking and why bytes = paint time.


  1. Base64 Image Encoder for CSSDeveloper Tools
  2. CSS Sprite Sheet GeneratorDeveloper Tools
  3. CSS Gradient GeneratorBackgrounds & Color
  4. CSS Box Shadow GeneratorShadows & Effects
  5. CSS Layer Styles GeneratorShadows & Effects
  6. CSS Button GeneratorTypography & Buttons


How it works


Minification is purely lossless: comments, indentation and redundant whitespace vanish; semicolons before closing braces drop. The browser reads the result identically — it never needed the formatting, you did. Typical stylesheets shrink 15–40% before gzip even starts.


Why it matters: CSS is render-blocking — the page paints nothing until the stylesheet arrives, so every stripped byte is earlier first paint. Workflow: develop readable, minify on deploy, and keep the readable source in version control. (This tool's regex approach covers standard CSS; build pipelines use full parsers like cssnano for edge cases.)


Run the code — try it yourself
The style block below is minified soup. Copy it into the tool above, Beautify it, then read what the mystery class actually does.


exercise.html — editable


Frequently asked questions
Will minifying ever change how my styles behave?
Not for valid CSS — only formatting is removed. Invalid or exotic syntax should go through a real parser-based minifier.
Should I also gzip?
Yes — servers compress text automatically. Minify + gzip stack: minification removes what compression handles least well (structure), so both together beat either alone.
Can Beautify recover any minified file?
It re-expands structure (braces, declarations, indentation). Original comments are gone forever — minification deleted them.
What about minifying HTML and JS?
Same principle, different grammars — use dedicated tools; this one is CSS-only.


Keep going
Make minification a deploy habit, not a decision — readable in the repo, minimal on the wire. It pairs with the request-cutting tools next door: Base64 inlining and sprite sheets, all three explained by the Performance lesson.
CSSmatic is a non-profit project, made by developers for developers.