CSS formatter
One declaration to a line, or the whole file on one.
Examples temporarily replace the input and settings. You can restore your previous work.
0 characters
Output
Paste or type above to see the result here.
Your files stay on your device
This tool runs entirely in your browser. What you paste is processed on your device and is never sent to a server, so it is safe to use with tokens, keys and unpublished text.
Example
Example: a minified button style laid out, recoloured, then minified again
A site’s stylesheet comes minified: one 290-character line for the Book now button and the hero banner, with a :hover, a ::after arrow and an @media block for phones. The button has to turn red for a winter sale. Settings: Lay it out, 2 spaces.
- Laid out, it becomes 29 lines: one declaration to a line, a blank line between rules, and the two rules inside @media (max-width:600px) indented one step further.
- content: " →" keeps its space and its arrow, and url("img/hero.jpg") center/cover stays as written: strings and url() are never split or squeezed.
- Change #1d6f42 to #b3261e and #155232 to #8c1d18, and add a comment at the top: 425 characters with the layout.
- Switch to Squeeze it down: the comment and every space that does nothing go, and it is one line of 290 characters again, 32% less.
| What to do | In | Out |
|---|---|---|
| Lay it out, 2 spaces | one line, 290 characters | 29 lines |
| Lay it out, 4 spaces or Tab | the same line | 29 lines, deeper indent |
| Squeeze it down | 29 lines and a comment, 425 characters | one line, 290 characters (32% saved) |
The same rules in the same order, now red: #b3261e stays #b3261e and nothing is merged or shortened. Paste the minified line back where the old one was.
How it works
- Paste the CSS.
- Formatting puts each selector and each declaration on its own line, with a blank line between rules.
- Minifying strips the comments and every space that does nothing.
- Copy or download the result.
Frequently asked questions
- What about a brace inside a string or a url()?
- It is left alone. Strings and comments are read as single pieces before anything is split on braces, so content: "}" formats correctly instead of tearing the rule in half.
- Does minifying keep the space in .a .b?
- Yes. That space is the descendant combinator and means something; the spaces around a colon or a brace do not. Only the meaningless ones go.
- Will a missing semicolon confuse it?
- No. The last declaration in a block usually has no semicolon, and it gets one on the way out.
- Does it reorder or shorten my properties?
- No. Nothing is merged, shortened or moved — #ffffff stays #ffffff. This lays out what you wrote; it does not rewrite it.
- Does minifying remove all comments?
- Yes, every one, including /*! … */ licence comments that some minifiers keep. If a licence asks for its notice to stay in the file, paste that comment back at the top after minifying.
- Does it handle @media, @supports and nested CSS?
- Yes. Rules inside @media, @supports and similar blocks are indented one step further, and a nested rule such as &:hover inside .card gets its own indented block. Minifying writes them back on one line without changing the order.
- Is anything sent to a server?
- No. It runs in your browser, so what you paste stays on your computer.