CSS Formatter and Minifier
Split CSS onto one rule per line, or strip the whitespace and newlines out of it. Minifying only removes what is genuinely unnecessary — no shortening colors, no merging shorthand properties. Saving a handful of bytes is not worth the chance of breaking someone's layout.
Pasted code never leaves your device. Everything runs in your browser; nothing is sent or stored anywhere. That is what makes it usable for internal config files and production queries.
What formatting does
Lines are split on braces and semicolons: the selector and its opening brace on one line, each declaration on its own line, the closing brace on a line by itself. Indentation follows brace depth, so rules inside @media go one level deeper. Every original line break is discarded and put back, which is why a file squashed onto one line and a ragged hand-written one come out looking the same. A space is added after colons and commas outside quotes and parentheses; the inside of url(a,b) is left alone. Formatting keeps every comment.
What minifying leaves alone
Anything inside quotes is carried through whole — the two spaces in content: "a b" survive. What goes is runs of whitespace, the whitespace around braces, colons, semicolons, commas, >, ~ and +, and the last semicolon in a block. An unquoted url() is treated like any other text, so wrap a data: URL containing semicolons in quotes.
Reading the byte count
The numbers above the result are UTF-8 bytes, not characters. If the server sends the file gzipped or with brotli, the percentage overstates the gain — whitespace is the part that compresses best, so the difference on the wire is usually a few percent at most.
Frequently asked questions
Does it shorten #ffffff to #fff?
No. That class of optimization saves a few bytes and breaks rendering when it gets something wrong. Only whitespace, newlines, the final semicolon in a block, and comments are removed.
Are license comments preserved?
Yes. Comments starting with /*! are kept. Other comments are removed when minifying.
Are comments removed?
Minifying removes /* … */ comments but keeps any that start with /*!. If a licence comment has to survive, begin it with /*! — there is nothing to add back afterwards.
How much smaller does it get?
Hand-written CSS is roughly a third whitespace, so that is the usual saving. Once the server sends it gzipped, though, whitespace compresses well anyway — the difference over the wire is much smaller.
Does minify then format give me my file back?
Not character for character. Blank lines and comments are gone the moment you minify, and formatting produces the default one-rule-per-line shape. The meaning is the same; the appearance is not.
Are rules inside @media formatted too?
Yes. Only brace depth matters, so an @media block is indented one level and the rules inside it two. Statements without braces, such as @import and @charset, end at their semicolon and get a line of their own.
Does it handle SCSS or LESS?
Nested rules look formatted, because only braces and semicolons are used to split lines. But // line comments are not CSS and are not recognized as comments — once minifying removes the line breaks, the code that followed one is swallowed by it. Use the preprocessor's own tooling for those files.
Does anything I paste get sent to a server?
No. Everything runs inside your browser and nothing is uploaded or stored. That is why you can use it on things you would not normally paste into a web page, like an internal config file or a production query. It also works with your network disconnected.