Minified or formatted CSS will appear here...
Original: 0 bytes Result: 0 bytes Reduction: 0%
Minify or beautify CSS code with custom indentation and comment options.
The CSS Formatter does two opposite jobs: it beautifies cramped, single-line stylesheets into readable indented rules, and it minifies verbose CSS down to the smallest valid form for production. Paste a stylesheet, choose a direction, and either way the output is ready to copy. Front-end developers use it to decode minified vendor CSS they need to override, to standardize formatting across a team, and to shave bytes off a stylesheet before deployment.
Minification is narrower than people expect. It removes only characters the browser does not need:
/* ... */.0px becoming 0.It does not change selectors, property names, property values, or the cascade. color: #ff0000 and color: red behave identically, but a minifier will not convert one into the other, because that would alter the source in ways you did not ask for. The rule of thumb: minification changes the representation, never the meaning.
A section of a base stylesheet:
/* Primary button */
.btn {
display: inline-block;
padding: 12px 20px;
border: 1px solid #d1d5db;
border-radius: 6px;
background: #ffffff;
color: #111827;
}
.btn:hover {
background: #f3f4f6;
}
Formatted, the block above is already readable; run through Minify, it becomes a single line with the comment removed, roughly a third of the byte count. To inspect a real-world case, paste a minified third-party stylesheet and click Format: each rule expands onto its own lines, and the property you want to override — a specificity, a z-index, a hardcoded color — becomes findable in seconds instead of by scrolling a wall of text.
margin will appear.margin: 0 10px is compact but hides which sides are set. Prefer explicit longhand when the intent matters, and run the formatter to keep it consistent.+ and − need surrounding spaces; a step that strips all whitespace inside calc() produces invalid CSS.A final word on when formatting pays off. For a stylesheet you own, format it once at the start of a project and let a build step minify it on the way out — that keeps the readable copy in the repository and the compressed copy in the browser. Formatting is most valuable not as a routine but at the moments when whitespace is the obstacle: reading a vendored library, reviewing somebody else’s compressed output, or hunting a single broken declaration in a file that arrived as one long line.
Yes, as long as you keep the original. Minification only removes whitespace, comments, and optional semicolons; it does not rewrite selectors or property values, so the browser sees an equivalent stylesheet. The practical rule is to treat the minified file as a build artifact: deploy it, but never edit it, because a compressed stylesheet with one line of thousands of rules is nearly impossible to maintain.
Comments are stripped in minified output, which is usually the point — license headers, section markers, and explanations are for developers, not browsers. Keep the comments in your source file. If a license requires the header to ship, preserve it separately with a tool that supports keeping the first comment.
CSS requires spaces around the + and − operators inside calc(); omitting them is invalid. A formatter that normalizes whitespace must therefore keep those spaces rather than collapsing them. If you write calc() by hand, remember that calc(100%-20px) is invalid, while calc(100% - 20px) works, and calc(100%/3) is fine because division does not need the spaces.
No. Formatting reformats the text it is given; it cannot repair an unclosed brace, a missing semicolon before the next declaration, or a misspelled property. It can make those problems easier to spot, because each declaration sits on its own line, but validation and repair remain your job — check the output in the browser's inspector or a linter.
It can remove some of the redundancy that compression exploits, so the compressed size may not shrink by the full amount shown in the tool's before-and-after numbers. Minification and compression still work together — you ship both — but the combined saving is usually smaller than either figure suggests when compared alone.
No. Formatting and minification run entirely in your browser with JavaScript. Stylesheets attached to an unreleased product, internal brand tokens, and anything else you would rather not share stay on your device.
Reviewed by the HandyTools Hub team · Last updated