CSS Formatter
Turn minified or messy CSS into clean, readable rules. Your code is processed as text in your browser — it is never executed or uploaded.
Loading tool…
Need help with this tool or found a problem? WhatsApp support Email
What does the CSS Formatter do?
Each selector gets its own line, each declaration is indented on its own line with a space after the colon, and nested blocks such as @media and @supports are indented correctly. Strings and comments are protected so they are not altered.
How to use the CSS Formatter
- Paste your CSS.
- Choose the indentation.
- Copy or download the formatted CSS.
Examples
Minified to readable
.nav{display:flex;gap:8px}@media (max-width:600px){.nav{flex-direction:column}} becomes properly indented rules.
Common use cases
- Reading third-party or minified stylesheets
- Debugging styles
- Learning CSS from real sites
Features and benefits
- Private by design — your data is processed on your device and never uploaded.
- Free with no account, no watermark and no usage limits.
- Works on phones, tablets and desktops in any modern browser.
Limitations to know
- It formats existing CSS; it does not validate or fix errors.
Frequently asked questions
Does it support media queries?
Yes, nested blocks are indented.
Will comments be removed?
No, comments are kept.
Does it support SCSS?
Simple SCSS often formats acceptably, but it is designed for CSS.
Related tools
All developer toolsCSS Minifier
Minify CSS to reduce stylesheet size.
HTML Formatter
Indent and beautify HTML markup.
JavaScript Beautifier
Re-indent minified or messy JavaScript.
Color Converter
Convert colours between HEX, RGB, HSL, HSV and CMYK.
JSON Formatter
Beautify JSON with indentation and syntax error locations.
SQL Formatter
Format SQL queries with keyword casing and indentation.