Urban Software
Free Tool

Free CSS Minifier & Beautifier, shrink it to ship, expand it to read

Paste your CSS and either minify it to the smallest valid form for a faster website, or beautify it into a clean, consistently indented layout you can actually read. It parses the CSS properly, so strings, data URIs and calc() expressions are never broken, and it shows you the exact bytes saved. Everything runs in your browser, so nothing is uploaded.

CSS has two natural states and you need both at different moments. When you ship it to a browser you want it as small as possible, every needless space and comment gone, because that stylesheet is downloaded by every single visitor and its size is pure page-load tax. When you read or edit it you want the opposite: generous spacing, one declaration per line, indentation that shows you the structure at a glance. Most free tools that promise this are quietly dangerous, because they treat CSS as text to be scrubbed with a few blunt find-and-replace passes rather than a language to be parsed. That is how a minifier strips the spaces out of content: "a , b" and changes what the page renders, breaks a base64 data URI by deleting a semicolon it thought was a rule separator, or removes the spaces around the plus in calc(100% - 20px) and produces a value the browser rejects. A stylesheet that is one percent smaller but subtly broken is far worse than one you never touched. This tool is built the careful way: it parses your CSS with full awareness of strings and parentheses, so it only ever adds or removes whitespace and never a character that matters, and it shows you the real byte count before and after so the saving is a fact you can see rather than a number you have to trust.

01

What minifying actually removes, and why it is safe

Minifying CSS makes the file smaller without changing a single thing about how it renders. It does this by removing everything the browser does not need to understand the rules: the comments you wrote for yourself, the line breaks and indentation that make it readable, the spaces around braces and colons and semicolons, and the last semicolon before a closing brace which is always optional. What it must never remove is anything meaningful, and that is exactly where naive tools fail. The space inside a quoted string is content and has to stay. The semicolons inside a base64 data URI are data, not rule separators. The spaces around the operators in a calc() expression are required by the CSS specification, so calc(100% - 20px) is valid and calc(100%-20px) is not. This tool parses the stylesheet with those rules built in, tracking when it is inside a string or a set of parentheses, so it removes the safe whitespace and leaves the meaningful characters untouched. The result is smaller and identical in behaviour, which is the only kind of minification worth doing.

02

Why a smaller stylesheet is a faster site

Every visitor to your site downloads your CSS before the page can finish rendering, because the browser will not paint content until it knows how that content is styled. That makes the stylesheet a render-blocking resource, and its size a direct cost to how quickly the page appears. Shaving comments and whitespace off a hand-written stylesheet commonly removes a fifth to a third of its bytes, and on a large file that is a real difference to first paint, especially on a phone over a slow mobile connection where every kilobyte is time. Minified CSS also compresses well over the wire, so the saving compounds. The practical workflow is simple: keep a readable, well-commented source stylesheet that you and your team edit, and ship a minified copy to production. This tool covers both ends of that workflow, so you can beautify a messy file to work on it and minify the finished result to deploy it, without a build step or a command line.

03

Beautifying: structure you can see

Beautifying is minifying in reverse. It takes a stylesheet that has been squashed into one line, or written inconsistently by several hands, and lays it out to a single predictable format: each rule on its own, one declaration per line, a space after every colon, nested rules inside a media query indented one level deeper. The point is not decoration, it is comprehension. A consistent layout lets you scan a file and immediately see where one rule ends and the next begins, which declarations belong to which selector, and how the media queries nest, which is precisely the information a wall of minified text hides. It is also the fastest way to make a stylesheet you inherited, or one you pulled minified from another site, workable again. Because the beautifier runs on the same careful parser as the minifier, the expanded version is guaranteed to be semantically identical to what you pasted: only the whitespace has changed, so you can reformat with total confidence that nothing about the styling has moved.

How to use it

  1. 1

    Paste your CSS

    Drop your stylesheet into the input pane, or click Load sample to see how it works. Everything is parsed and processed in your browser, so nothing is uploaded and even a private stylesheet never leaves your machine.

  2. 2

    Choose Minify or Beautify

    Pick Minify to strip the file to the smallest valid form for shipping, or Beautify to expand it into a clean, indented layout for reading and editing. You can switch between the two at any time and the output updates instantly.

  3. 3

    Check the result and the saving

    Read the formatted output alongside your input, with the exact transfer-byte size of each and, for minifying, the precise percentage saved. Because only whitespace ever changes, the output is guaranteed to render identically to what you pasted.

  4. 4

    Copy or download

    Copy the result to your clipboard or download it as a .css file. Exporting asks you to sign in with a free account, which is the only thing an account is for; minifying, beautifying and previewing are always free and never require one.

Common mistakes

Editing the minified file instead of the source

Minified CSS is for machines to download, not people to edit. Making a change in the minified copy and losing the readable source is how a codebase becomes unmaintainable. Keep a beautified source stylesheet as the thing you edit, and minify a fresh copy each time you ship.

Trusting a minifier that does not parse strings

A minifier that scrubs whitespace with blind find-and-replace can corrupt the spaces inside a content string, the semicolons inside a data URI, or the operators inside calc(). Always confirm the output renders the same, or use a tool like this one that parses the CSS so those characters are never touched.

Minifying but not compressing

Minifying removes whitespace; gzip or Brotli compression on your server removes redundancy across the whole file, and the two stack. Minify your CSS and make sure your host or CDN is serving it compressed, and you get the full saving rather than half of it.

Shipping one giant stylesheet for the whole site

Minifying helps, but a single enormous stylesheet still forces every page to download rules it will never use. Split your CSS by what each page needs, or inline the critical styles for the first paint, and minify each piece, so visitors download only the styling that page actually requires.

Questions

Is this CSS minifier free, and is my code private?
Yes, it is completely free with no limit on how much CSS you process. It also runs entirely in your browser: your stylesheet is parsed and reformatted on your own machine and is never uploaded to any server. Signing in is only needed to copy or download the result, so your work can follow you across our other tools. Because nothing is uploaded, it is safe to use on proprietary or client stylesheets.
Will minifying change how my CSS looks on the page?
No. Minifying only removes whitespace, comments and the optional trailing semicolons that the browser does not need. The tool parses your CSS with full awareness of strings and parentheses, so the spaces inside a content value, the semicolons inside a data URI and the operators inside calc() are all left intact. The output is smaller but renders identically to what you pasted.
How much smaller will my CSS get?
It depends on how much whitespace and how many comments the file contains, but a hand-written, well-commented stylesheet commonly shrinks by a fifth to a third when minified. The tool shows you the exact transfer-byte size before and after and the precise percentage saved, so you see the real figure for your own file rather than an estimate.
What is the difference between minifying and beautifying?
They are opposites. Minifying strips a stylesheet down to the smallest valid form for shipping to browsers, with all the whitespace and comments removed. Beautifying expands it into a clean, consistently indented layout with one declaration per line, for reading and editing. This tool does both, and because they share the same parser, switching between them never changes the meaning of the CSS.
Can it handle media queries, calc() and data URIs?
Yes. Media queries and other at-rules with blocks are indented correctly when beautified and collapsed correctly when minified. calc() expressions keep their required operator spaces, so they stay valid. And base64 data URIs, including the semicolons inside them, are treated as opaque data and never broken. These are exactly the cases where simpler tools tend to fail, so the engine is built to handle them.
Does it preserve licence comments?
Yes. A comment that begins with an exclamation mark, written as slash-star-bang, is the standard convention for a licence header that must survive minification, and the tool keeps those while removing all other comments. So you can strip a stylesheet to its smallest form and still ship the licence notice your library or framework requires.

Related tools

Need this done properly, at scale?

The tool handles the one-off. When it's a system you're building, that's the paid version of the job, and we do that too.

Custom Website Development