About this tool
Reformat compressed CSS snippets, copied styles, generated theme output, and review fragments so selectors and declarations are easier to inspect.
CSS Formatter turns compressed, generated, or messy stylesheet snippets into readable blocks so selectors, declarations, comments, and media queries are easier to inspect. It is useful for debugging copied CSS, reviewing CMS theme output, cleaning email snippets, and preparing code examples.
- Uses Prettier 3.8.1 and its PostCSS plugin to parse CSS, SCSS, or Less rather than splitting text around braces and semicolons.
- Preserves supported strings, comments, functions, data URLs, custom properties, variables, mixins, at-rules, and nested syntax.
- Controls tabs or 2/4 spaces, print width, and quote preference and requires output to remain stable when formatted again with the same policy.
How to use CSS Formatter
Paste the CSS, choose the indentation size, and review the formatted output before copying it into an editor, ticket, pull request, or docs page. Treat the formatted result as a readability pass, then validate important styles in the browser or your build pipeline before shipping.
When this tool is useful
- When expanding minified CSS before debugging selectors, media queries, or declarations.
- Before sharing CSS snippets in docs, pull requests, support tickets, or issue comments.
- When reviewing generated CSS from a CMS, theme builder, email template, or third-party embed.
Practical tips
- Use the CSS Minifier after editing if you need compact production output.
- Validate critical CSS in the target browser because formatting does not fix syntax or compatibility issues.
- Keep original source CSS when debugging cascade, specificity, or generated output problems.
Examples you can test
Load an example, compare the result with the expected output, then replace it with your own input.
Expand minified CSS
Example input
.card{display:flex;gap:16px}.card:hover{color:#111}Expected output
Readable selector blocks with one declaration per line
This is useful before reviewing generated styles or pasted snippets in a pull request.
Review a media query
Example input
@media (max-width:640px){.card{padding:16px}}Expected output
Nested media query and selector block with indentation
Indented output makes breakpoint-specific overrides easier to inspect.
Validation checklist
- Treat formatted CSS as a readability aid, not a syntax validator.
- Check the result in the target browser or build tool before shipping.
- Keep original CSS when debugging generated output or cascade issues.
- Review comments, media queries, custom properties, and calc expressions after formatting.
- Use CSS Minifier after editing if the final destination expects compact CSS.