CSS Formatter & Beautifier
Beautify or minify CSS. Configurable indent, blank lines between rules, and selector formatting — all in your browser.
Beautify
Add proper indentation, blank lines between rules, and newline after comma-separated selectors. Powered by js-beautify under the hood.
Minify
Strip comments and collapse whitespace. Quoted strings (content, font-family, URLs) are preserved so your styles still work.
Private
Formatting runs in your browser. Your stylesheets — including proprietary selectors and design tokens — never leave your device.
Why format CSS at all?
Minified CSS is impossible to scan for missing braces or wrong selectors. A pretty-printed stylesheet with consistent indentation makes structural mistakes obvious — an extra level of indentation almost always means a missing closing brace. The same logic applies to code review: a beautified file produces a clean line-by-line diff that reviewers can actually read.
When to minify
Minify only the version you ship — never the version you keep in version control. Build tools like Vite, Webpack, and Parcel minify CSS automatically. This tool is useful for one-off cases: a snippet you're pasting into a CMS, an inline style block in an email template, or a quick before/after to see how much whitespace was hiding in a file.
Things the beautifier preserves
CSS comments (/* … */) are kept as-is during beautification. Quoted string values — used in content, font-family, and url() — are never mangled. Vendor prefixes (-webkit-, -moz-, etc.) and CSS custom properties (--variable) are handled correctly.
Frequently asked questions
›What does a CSS formatter do?
It rewrites CSS so that selectors, properties, and values are properly indented and spaced. The computed styles in the browser do not change — only whitespace is added or removed.
›Beautify vs minify — what's the difference?
Beautify adds line breaks and indentation so the stylesheet is readable in an editor or pull request. Minify strips comments, removes whitespace, and collapses runs of spaces to shrink the file before serving it to users.
›Does minifying CSS break anything?
No for well-formed CSS. The minifier preserves quoted strings (content values, font-family lists, URLs) and CSS comments are stashed before compression. The resulting CSS computes identically in browsers.
›What indentation options are supported?
Two spaces, four spaces, or a literal tab character. Choose whichever matches your team's style guide or the Prettier config in your project.
›Can I control blank lines between rules?
Yes. Toggle 'Blank line between rules' to add an empty line before each new selector block, or turn it off to keep selectors compact and vertically dense.
›Will it fix invalid CSS?
No — it formats whatever you paste. If a property is misspelled or a brace is unbalanced, the output will still be invalid, just better-indented. Use a CSS linter for correctness checking.
›Does it handle nested rules (SCSS/Nesting)?
Native CSS nesting syntax is preserved and indented correctly. SCSS-specific features like variables, mixins, and @extend are not understood — use a Sass formatter for those.
›Is my CSS sent to a server?
No. Formatting and minification run entirely in your browser using js-beautify. Your stylesheets — including proprietary selectors, design tokens, or comments — never leave your device.
›Can I format a whole stylesheet file?
Yes. Paste the entire contents of your .css file into the input area, or drop a .css file onto the page. The tool handles files of any size that fit in your browser's memory.
More free developer tools
Part of our growing tool belt — all client-side, all free.
JSON Formatter & Beautifier
Format, beautify, minify and validate JSON with sort keys, ASCII escape, and tree view.
Open toolJSON Validator
Strict JSON validator with precise error location, lint hints, structure stats, and duplicate key detection.
Open toolJSON Viewer
Interactive JSON tree explorer with filter, copy-path, expand/collapse all, and colour-coded types.
Open tool