CSS minifier & beautifier
Minify or format pasted CSS.
FreeRuns in your browserNo signupUpdated 2026-10-29
Minifying strips comments and whitespace only. It does not merge rules or rewrite colours.
Input
365 B
Output
264 B
Change
-28%
Before gzip; the gap narrows after compression
.card{display:flex;flex-direction:column;gap:16px;padding:24px;background:#ffffff;border-radius:16px;box-shadow:0 1px 2px rgba(15,23,42,.08),0 8px 24px rgba(15,23,42,.12)}.card>.title{font-size:1.25rem;margin:0 0 8px 0}@media (max-width:640px){.card{padding:16px}}About this tool
How it works and how to read the result.
Need this done for you?
Website design & development
Company websites designed and built to win trust and enquiries.
See the serviceWhat it does
This css minifier removes comments, line breaks and unneeded spaces from a stylesheet so it downloads faster. Switch to Beautify and it does the opposite, turning minified or messy CSS into consistently indented, readable code. The size before and after is shown either way. The minifier is deliberately conservative: it does not merge rules, reorder selectors or rewrite colours, so the output behaves exactly like the input.
How to use it
- Paste your CSS into the box, or copy a stylesheet from your project or a live site.
- Choose Minify to shrink it for production, or Beautify to make it readable again.
- When minifying, tick the option to keep comments that start with /*!, which is where licences usually live.
- When beautifying, choose two or four spaces of indentation.
- Copy the result or download it as a file.
How to read the result
The sample is a small card component of 365 bytes with a comment, indentation and a media query. Minified it is 264 bytes, 28% smaller. The comment went, every line break went, the spaces after colons and commas went, and the last semicolon in each rule was dropped because the closing brace makes it redundant. Leading zeros were trimmed too, so 0.08 became .08.
The saving looks smaller once the file is served compressed. Gzip and Brotli are very good at squeezing repeated whitespace, so the difference over the network is much less than 28%. Minifying is still worth doing, because the browser has less to parse, but a build step that does it automatically is better than doing it by hand each time.
If the warning about unbalanced braces appears, the input has a missing or extra curly bracket. Fix that first; minifying broken CSS makes the error harder to find.
Beautify mode puts each selector and declaration on its own line, which is the quickest way to read CSS copied from a live site.
Encode small icons to drop straight into your stylesheet with the SVG to data URI encoder. For a full front-end performance review, see website design and development.
Questions
Frequently asked.
Does minifying CSS improve page speed?
A little. The file is smaller and quicker to parse, but most servers already compress CSS with gzip or Brotli, which removes much of the same whitespace. Bigger wins usually come from removing unused rules and avoiding render-blocking stylesheets. Minify as part of your build anyway; it costs nothing.
Is it safe to minify CSS by hand?
Yes, for whitespace-only minifying like the kind done here. Problems come from aggressive minifiers that merge or reorder rules, which can change which declaration wins. Keep the original, readable file as your source and minify a copy, so you never have to edit minified code.
More in Design & CSS
Related tools.
Your next move
Like what you see? Tell us about it.
A process that takes too long, a website that undersells you, or an idea ready to take shape. Tell us where you are and we will suggest a useful next step.
India · Working with clients worldwide