justyourdevCSS Formatter
Make minified or messy CSS readable again.
- 100% Free
- No Sign Up
- Works in Your Browser
CSS formatter
Beautify and indent CSS
Indent
Everything runs in your browser. Nothing is uploaded.
More Developer Tools
View all tools- JSON formatterPretty-print and indent JSON
- JSON validatorCheck JSON and find syntax errors
- JSON minifierStrip whitespace from JSON
- XML formatterIndent XML so it's readable
- SQL formatterFormat SQL queries for readability
- Base64 encode/decodeEncode and decode Base64 text
- JWT decoderDecode a JSON Web Token
- UUID generatorGenerate random v4 or time-ordered v7 UUIDs
- Timestamp converterConvert Unix epoch time to dates
Every everyday developer tool, right in your browser.
No installs. No uploads. No signup.
Browse all 36 tools- Developer tools
- 36
- Cheat sheets
- 10
- Bytes uploaded
- 0
How to use the CSS formatter
Three steps, all in your browser.
- 1
Paste your input
Type or paste your code or data. Press Sample to try an example.
- 2
Pick the style
Choose indentation or options. The result updates as you type.
- 3
Copy the result
Copy the output in one click. Nothing is saved or sent anywhere.
CSS Formatter: what to know
The CSS formatter uses Prettier to rewrite a stylesheet with one selector and one declaration per line, consistent indentation and spacing around colons and braces. It's the fastest way to read minified CSS from a website, a CDN or a third-party widget.
Only whitespace changes. Selectors, properties, values and the order of rules stay exactly as they were, which matters because the cascade depends on order: a later rule with the same specificity wins. Comments are kept.
Modern CSS formats fine, including custom properties (--brand: #334155), native nesting, @layer, @container and @media range syntax. Switch the language to SCSS or Less to format preprocessor stylesheets with Prettier's matching parser.
Popular uses
- Reading minified CSS to find which rule styles an element
- Tidying CSS copied from browser developer tools
- Formatting snippets for documentation or a pull request
- Cleaning up an old stylesheet before refactoring it
Tips for the best result
- Formatting won't tell you which rules are unused; the Coverage panel in Chrome DevTools does.
- If formatting fails, look for an unclosed brace or a missing semicolon just before the reported line.
- Pair it with the CSS minifier: format to edit, minify to ship.
Read how JustYourDev works and our privacy details. Code, data and files you use here are processed in your browser and are never sent to our server.