This CSS formatter puts each rule and each declaration of a stylesheet on its own line, indented with 2 spaces, 4 spaces or a tab, with nested blocks such as media queries one level deeper. Minify does the reverse for production: it collapses whitespace, removes the spaces around braces, colons, semicolons and commas, and drops the last semicolon in each block. Both buttons strip comments and run in your browser, and a size panel compares input and output in bytes.
How to use the CSS formatter
- Paste your CSS into the Input CSS box, or press Try Example to load a sample stylesheet.
- Choose the indent and click Beautify, or press Ctrl+Enter (Cmd+Enter on a Mac) in the input box.
- Review the output. Comments are gone, so keep a copy of the original if you need them.
- Use the Minify button to put the CSS on one line for production and see how many bytes it saved.
- Copy the result with the Copy button above the output. Clear empties both panels.
What Beautify and Minify change
| Change | Beautify | Minify |
|---|---|---|
| Comments | Removed | Removed |
| Declarations | One per line, indented | All on one line |
| Space before { | Exactly one | None |
| Space around colons | Kept as you wrote it | Removed |
| Selector lists | Kept on one line, e.g. .btn, .link | Space after commas removed |
| Last semicolon in a block | Kept if present, never added | Removed |
| Values and colors | Unchanged | Unchanged |
The CSS formatter fixes layout only. It does not add a missing semicolon, sort properties or tell you about syntax errors, so margin : 0 auto ; comes out with its spacing intact on a new line. A blank line separates top-level blocks.
Example: beautify CSS from one line
Input:
.card{padding:1.5rem;border-radius:8px}.card h2{margin:0 0 .75rem;font-size:1.25rem}@media (max-width:768px){.card{padding:1rem}}Output with 2 spaces:
.card {
padding:1.5rem;
border-radius:8px
}
.card h2 {
margin:0 0 .75rem;
font-size:1.25rem
}
@media (max-width:768px) {
.card {
padding:1rem
}
}Going the other way, a 131-byte block with a comment, 4-space indents and two rules minifies to .btn{padding:0.5rem 1rem;border-radius:4px}.btn:hover{background:#1f5c99;color:#fff}, which is 84 bytes. The size panel reports that as 47 B smaller (35.9%).
When to minify CSS and when to format CSS
Format CSS when you need to read it: a minified file from a theme, a stylesheet copied from browser dev tools, or code someone wrote all on one line. Minify CSS before you ship a small stylesheet that has no build step. Projects with a bundler usually minify during the build, so run this tool on the source, not on the output.
Code editors can do the same job as this CSS formatter on files you have open. VS Code's Format Document command (Shift+Alt+F on Windows) formats CSS without an extension, and Prettier does it from the command line with npx prettier --write styles.css. This page is quicker for a snippet you do not want to save as a file, or on a machine where you cannot install anything, since the CSS formatter needs only a browser.
Things that can break
- Unquoted data URIs. Beautify starts a new line after every semicolon, including the one inside
url(data:image/png;base64,...), which breaks the URL. Put quotes inside the brackets first: semicolons inside quoted strings are left alone. For how data URIs work, see encoding images to Base64 in the browser, and the image to Base64 tool writes the quoted CSS for you. - An unclosed
/*comment makes the CSS formatter drop everything after it, in both modes. - Minify removes the space before a colon, so
div :first-childbecomesdiv:first-child, which matches different elements.
If the CSS sits in a style block inside a page, the HTML formatter handles the markup around it. Colors for a new stylesheet can come from the color palette generator, and the rest of the formatters are in the developer tools section.
