How to use the CSS Formatter / Beautifier
Format your CSS in three steps:
1
Paste your CSS
Paste minified or messy CSS into the input panel, or click the upload icon to load a .css file from your device.
2
Configure options and click Format
Choose 2 or 4 spaces for indentation and optionally enable 'Sort Properties' to alphabetise declarations. Click 'Format CSS' to process.
3
Copy or download
Copy the formatted CSS to your clipboard with one click, or download it as a .css file.
When to use this tool
Use the CSS formatter to make stylesheets readable and maintainable:
- →Reformatting minified or bundled CSS back into readable code for debugging or editing
- →Cleaning up CSS exported from design tools like Figma, Webflow, or Adobe XD
- →Standardising indentation and rule formatting across stylesheets from multiple team members
- →Making third-party CSS library overrides readable before customising them
- →Formatting inline styles or style attributes extracted from HTML for editing
- →Preparing CSS for code reviews, documentation, or tutorial articles
- →Enabling diff comparison between two versions of a stylesheet after formatting both
Frequently asked questions
Q:Does the formatter support CSS custom properties (variables) and modern CSS?
Yes — CSS custom properties (--primary-color: #1a6b4a), CSS Grid and Flexbox properties, logical properties, and all CSS3 features are treated as standard declarations and formatted correctly. The formatter works at the syntactic level and does not interpret property values, so any valid CSS property is handled.
Q:Does it support @media queries, @keyframes, and other at-rules?
Yes — at-rules including @media, @keyframes, @supports, @layer, @container, @font-face, and @import are all recognised. Nested rule blocks inside @media and @supports are indented an extra level relative to their parent at-rule.
Q:What does the 'Sort Properties' option do?
When enabled, the declarations within each CSS rule block are sorted alphabetically by property name. This produces a consistent, predictable ordering across all rules and makes it easier to find a specific property at a glance. It does not change the selector order or the rule block order — only the properties inside each individual rule.
Q:Will the formatter change any property values or selectors?
No — only whitespace and indentation are modified. Property names, property values, selector strings, comment text, and rule order are all preserved exactly as written in the input. The formatted output is semantically identical to the original CSS.
Q:Can I format SCSS or Less with this tool?
This formatter is designed for standard CSS. SCSS and Less files that do not use features like nesting, variables, or mixins (i.e. plain CSS-compatible syntax) will format correctly. Files using SCSS-specific syntax such as nested rules, & parent selectors, or @include will partially work but nesting won't be handled correctly. For SCSS/Less, use Prettier with the SCSS plugin.
Q:Is there a file size limit?
There is no enforced limit. The formatter processes everything in your browser. Large CSS files (100KB+) may take a second to process on slower devices, but there is no hard ceiling.
Q:How is a CSS formatter different from a CSS linter?
A formatter (beautifier) only adjusts whitespace and indentation to produce readable code — it does not report or fix errors. A linter (like Stylelint) analyses your CSS for rule violations, unknown properties, invalid values, specificity issues, and code quality problems. Use a formatter for readability; use a linter for quality enforcement.