CSS Beautifier
Format CSS, SCSS and Less with consistent indentation and optional alphabetical property order. Private, in your browser.
CSS, SCSS or Less
Stays in your browserResult
The result appears here.
Shortcuts: Ctrl+Enter run · Ctrl+Shift+C copy result · / search (use ⌘ on Mac)
Next steps
Done here? Use the Send to… menu on the result to carry it on to CSS Minifier or HTML Beautifier.
Free Online CSS Beautifier
Turn minified or untidy CSS into readable code, with the indent you like and optional sorted properties. It gives developers a quick browser-based way to solve a focused css beautifier task before moving the result into a project.
How to use the css beautifier
Paste your code in the box, adjust the options if you want, and press Format. Choose CSS, SCSS or Less, the indent and whether to sort properties alphabetically, then press Format.
Common mistakes
- Choose SCSS or Less for nested rules, otherwise a plain CSS parser may reject them.
- Sorting leaves blocks that contain comments or nested rules as they were.
Frequently asked questions
Can it format SCSS and Less?
Yes. Choose the syntax so nesting, variables and mixins are understood.
Does sorting change how the page looks?
Usually not, but when the same property appears twice the later one wins, so check blocks where order matters.
Is my CSS uploaded?
No. It runs in your browser.
How do I use this css beautifier tool?
Use the interactive controls above; processing stays in your browser and the result is intended as a practical starting point for development work.
More Formatters & Parsers
JSON ParserCheck if JSON is valid and see it neatlyJSON Schema ValidatorCheck data follows the rules you setJSONPath TesterPick values out of JSON with a pathXML/XSD ValidatorCheck XML is valid and follows a schemaJSON ↔ TOML ConverterSwitch config files between JSON and TOMLURL ParserBreak a web link into its partsQuery String ParserRead the ?a=1&b=2 part of a linkREST API TesterSend API requests and see the response