utilyfe

CSS Formatter and Minifier

Make CSS readable, or make it small. Paste a stylesheet and get the result instantly, with the bytes saved.

Runs entirely in your browser. Nothing you enter is uploaded or stored.

Also try:PX to REM ConverterCSS Gradient GeneratorCSS Box Shadow Generator

How to use the CSS Formatter and Minifier

  1. 1Paste your CSS into the box on the left, or press "Try an example".
  2. 2Choose Beautify to make it readable, or Minify to make it as small as it can safely be.
  3. 3When beautifying, pick the indentation, and whether to leave a blank line between rules or remove comments.
  4. 4Copy the result from the box on the right. When minifying, the line under the boxes shows how many bytes you saved.

Two opposite jobs

CSS gets written to be read by people and shipped to be read by browsers, and those two needs pull in opposite directions. Readable CSS has line breaks, indentation, spaces after colons and comments explaining why. A browser needs none of it. Beautify puts a stylesheet into a consistent, readable shape: useful for CSS you’ve inherited, copied from a page’s source, or received as one unbroken line. Minify does the reverse, taking out everything that exists only for humans, so the file is smaller to send.

What Beautify does

Every declaration goes on its own line, indented one level inside its block, with a single space after the colon. Selectors in a list each get a line, combinators like > and + get a space on either side, and commas in values get one space after them and none before. Nested rules and at-rules are indented one further level each, and top-level rules are separated by a blank line, which you can turn off. You choose two spaces, four spaces or a tab. Strings, url() values, comments and the values of custom properties are left exactly as they were written, so nothing inside them shifts.

What Minify removes, and leaves alone

The minifier is deliberately conservative. It takes out line breaks and indentation, comments, the spaces around commas and combinators, the space just inside parentheses, and the last semicolon before each closing brace. It does not change a single value: colours aren’t shortened, numbers aren’t rewritten, units aren’t converted, declarations aren’t merged or reordered, and no rule is dropped, even an empty one. Spaces that carry meaning survive, like the gap between 0 and auto in margin: 0 auto, the operators inside calc(), and the space before a parenthesis after and in a media query. Comments that begin with /*! are kept, since that’s the convention for licence notices.

Modern CSS is fine

A stylesheet doesn’t have to be old-fashioned to go through. Nested rules, @layer, @container, @supports, @keyframes and custom properties are all read as ordinary blocks and statements. Escaped characters in selectors, like .sm\:flex, aren’t mistaken for punctuation, attribute selectors and :nth-child() arguments are left alone, and a ; or } inside a string or a data: URL doesn’t end anything early.

When to use this, and when not to

Most projects minify CSS automatically as part of their build, and if yours does, that’s the right place for it. A quick tool earns its keep in the gaps: a CSS box in a CMS or email builder, a snippet for a code sample, a stylesheet you need to read that arrives minified, or a fast check of how much whitespace and comments are costing you. Minifying and compression work together: a server that compresses CSS will squeeze a minified file further still.

Nothing leaves your browser

There’s no server behind this formatter. The stylesheet is processed in the page as you type, so nothing you paste is sent, stored or logged anywhere.

Questions

What's the difference between formatting and minifying?
They're opposites. Formatting (also called beautifying) adds line breaks and indentation so CSS is easy to read and edit. Minifying strips out everything a browser doesn't need (the whitespace, the comments) so the file is as small as possible. Both produce CSS that means exactly the same thing to a browser.
Does minifying change how my CSS behaves?
No. The minifier only removes whitespace, comments and the last semicolon in each block. It doesn't rename anything, merge rules, reorder declarations or rewrite values, so every rule and declaration that goes in comes out, and in the same order, which matters for CSS, where later declarations override earlier ones.
What exactly does the minifier remove?
Line breaks and indentation, spaces around commas, spaces around selector combinators like >, + and ~, spaces just inside parentheses, the space before !important, comments, and the final semicolon before a closing brace. It keeps every space that matters, such as the ones between values in margin: 0 auto and around the operators in calc().
Are licence comments kept?
Yes. A comment that starts with /*! is the usual way to mark one that must stay, and the minifier leaves it in place while removing every other comment. When beautifying, comments are kept unless you tick Remove comments.
Does it work with modern CSS like nesting, @layer and @container?
Yes. It reads a stylesheet as blocks inside blocks, so nested rules, @media and @container queries, @layer, @supports and @keyframes are all handled, and an at-rule it has never heard of is treated the same way as a known one. It doesn't need to understand every property to format the file correctly.
Will it shorten colours, numbers or units?
No, on purpose. Some minifiers rewrite #ffffff as #fff or 0.5 as .5, and a few go further and merge rules. That saves more bytes, but it also means the output is no longer your CSS with the air let out. This tool leaves values exactly as written, so what you get is always easy to trust and to compare with the original.
How much smaller will my CSS get?
It depends on how much whitespace and how many comments there were. Hand-written, well-commented CSS shrinks the most, and CSS that's already been minified won't shrink at all. Servers normally compress CSS as well, so the saving you see here is on top of that rather than instead of it.
Can I turn minified CSS back into the original?
Not exactly, because the comments and the original layout are gone for good. But Beautify will make minified CSS readable again (every rule and declaration on its own line, properly indented), which is usually all you need to read or edit someone else's stylesheet.
Does it check my CSS for mistakes?
No, it's a formatter, not a validator. It tells you when braces don't match, because that changes how the rest of the file is read, but a misspelled property or a value that doesn't make sense is passed through unchanged.
Is my CSS uploaded anywhere?
No. The formatting runs inside this browser tab. Nothing is sent to a server, logged or stored, so it's safe to paste a stylesheet from a private project.