CSS Formatter
Developer Tools
Format and tidy CSS — minified, mashed-together, or copy-pasted from a build artifact — into clean, idiomatic rules.
Runs entirely in your browserAbout CSS Formatter
The CSS Formatter rebuilds your stylesheet with one rule per line, properly indented declarations, and a blank line between rule blocks. It uses `js-beautify`'s CSS mode, which is widely used by editors and IDEs to format CSS, SCSS source files, and CSS-in-JS output.
This is the tool to reach for when you're inspecting a third-party stylesheet, debugging the output of a build pipeline, or copying styles from a design tool that doesn't pretty-print. The formatter never changes the meaning of a rule — selectors, values, and units are preserved exactly. Indentation (2 or 4 spaces, or a tab) is your choice. Everything happens in your browser, so private styles never leave your machine.
How to use
- 1
Paste your CSS
Drop your CSS — minified or otherwise messy — into the input editor.
- 2
Choose an indent
Pick 2 spaces, 4 spaces, or Tab from the Indent dropdown.
- 3
Grab the result
Use Copy or Download to take the formatted CSS into your project.
Examples
Expanding minified CSS
A typical minified rule expands into a readable, multi-line declaration block.
Input
.btn{background:#0ea5e9;color:white;padding:8px 12px;border-radius:6px;font-weight:600;}.btn:hover{background:#0284c7;}Output
.btn {
background: #0ea5e9;
color: white;
padding: 8px 12px;
border-radius: 6px;
font-weight: 600;
}
.btn:hover {
background: #0284c7;
}Frequently asked questions
Does it support SCSS or Less?+
It formats plain CSS only. SCSS/Less features like nested rules and variables are not parsed; they may format approximately but won't be reorganized.
Will it deduplicate rules or reorder properties?+
No. The formatter is purely a pretty-printer — it never changes the meaning, order, or count of your declarations.
Can it handle @media and @keyframes blocks?+
Yes, including deeply nested at-rules. Inner blocks indent one level deeper than their containing rule.
Is my CSS sent to a server?+
No. Everything runs locally in your browser.
Related tools
JSON Formatter
Format, beautify, and explore JSON with an expandable tree view. Includes indent control and minify.
JSON Validator
Validate JSON structure and pinpoint syntax errors by line and column.
HTML Formatter
Clean and indent messy HTML for better readability.
SQL Formatter
Beautify SQL queries with proper indentation across Postgres, MySQL, SQLite, and MSSQL dialects.
XML Formatter
Format XML into a clean, readable structure with attribute control.
JSON to XML Converter
Convert JSON data into well-formed XML quickly.