CSS Formatter
Expand minified or untidy CSS into readable rules with one declaration per line and consistent indentation. Works with media queries and nested rules.
Your CSS is formatted as plain text and never applied to this page. Strings, comments and values inside url() are kept as written.
How to Use the CSS Formatter
- Paste your CSS into the input box.
- Choose an indentation style: 2 spaces, 4 spaces or tabs.
- Review any warnings, such as a missing closing brace.
- Copy the formatted CSS or save it as a .css file.
Example
- Input
- .card{padding:16px;color:#333}.card h2,.card h3{margin:0}
- Output
- .card { padding: 16px; color: #333; } .card h2, .card h3 { margin: 0; }
About the CSS Formatter
Minified CSS saves bandwidth but is almost impossible to read. Formatting it makes it easy to find a rule, understand a third-party stylesheet, review a change or clean up CSS copied from browser developer tools.
Each rule starts on a new line, each selector in a list gets its own line, and each declaration is written as "property: value;" on its own indented line. Blocks inside media queries, supports rules and native CSS nesting are indented by depth, with a blank line between top-level rules.
Strings, comments and values inside parentheses, such as url() and data URIs, are copied exactly, so characters like ; and } inside them do not break the output. The formatter does not validate properties, reorder rules or remove anything. If braces do not match, it still formats the stylesheet and shows a warning. The CSS is treated as text in your browser and is never applied to the page or sent to a server.
Frequently Asked Questions
Will formatting change how my CSS works?
No. Only whitespace and line breaks change, plus a semicolon after the last declaration in a block where it was missing. Selectors, values and comments are kept.
Does it support media queries and nested CSS?
Yes. Anything inside braces is indented one level deeper, including @media, @supports and native nested rules.
What happens with broken CSS?
The formatter still formats what it can. It warns about missing or extra braces, unclosed comments and unclosed strings so you can find the problem.
Can it minify CSS?
No. This tool only beautifies CSS. It does not remove whitespace or shorten values.
Is my CSS uploaded?
No. Formatting runs in your browser with JavaScript, and this tool does not send your CSS to a Usevanta server.
Related Tools
All developer tools →Indent and tidy HTML markup so it is easy to read, without rendering it.
Beautify, validate or minify XML without rendering it.
Format and validate JSON directly in your browser.
Pick a color and copy its HEX, RGB and HSL codes, with tints, shades and contrast checks.