Format and tidy CSS, SCSS and Less with consistent spacing and indentation.
Minified stylesheet
Production CSS compressed onto one line
.btn{padding:8px 16px;border-radius:6px;background:#4f46e5;color:#fff}.btn:hover{opacity:.9}Media query
Responsive rules that need indentation
@media (min-width:768px){.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}}SCSS nesting
Nested syntax with a variable
$brand: #4f46e5; .card { color: $brand; .title { font-weight: 600; &:hover { text-decoration: underline; } } }Minified stylesheet
Production CSS compressed onto one line
.btn{padding:8px 16px;border-radius:6px;background:#4f46e5;color:#fff}.btn:hover{opacity:.9}Media query
Responsive rules that need indentation
@media (min-width:768px){.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}}SCSS nesting
Nested syntax with a variable
$brand: #4f46e5; .card { color: $brand; .title { font-weight: 600; &:hover { text-decoration: underline; } } }Plain CSS, SCSS or Less. The syntax is detected from the content, so there is nothing to configure.
Selectors, declarations and nested blocks are laid out consistently, making duplicate or conflicting rules easier to notice.
Take it back into your project, or download it as a .css file.
Consistent layout makes it obvious when the same selector appears twice with conflicting declarations.
SCSS and Less nesting, variables and mixins are formatted rather than mangled into invalid syntax.
Output follows the same conventions as Prettier, so formatted CSS will not fight your repository’s existing style checks.
Minified stylesheets and hand-edited CSS both drift towards inconsistency. This formatter normalises indentation, spacing around braces and colons, and declaration layout, so a stylesheet reads the same regardless of who last touched it. SCSS and Less are supported alongside plain CSS, including nesting and variables.
Keep going
Related pages in Developer Tools, plus what others are using right now.
More developer tools that pair well with this one.
Indent messy HTML into readable, consistently structured markup.
Create linear and radial CSS gradients visually and copy the code.
Build CSS box shadows visually and copy the generated code.
Format JavaScript and TypeScript with the same rules your editor uses.
Format, validate and minify JSON, with errors that point to the exact line.
Indent and validate XML, with clear messages when tags do not match.
Create strong random passwords with full control over length and characters.
Work out any percentage — of a number, as a share, or as a change.
Count words, characters, sentences and paragraphs as you type.
Convert between length, weight, temperature, volume, speed, data and more.
Count characters with and without spaces, against the limits that matter.
Find the mean, median, mode and range of a list of numbers, with the working shown.
Sample and population standard deviation and variance, both shown, with the working.
Turn a logo into favicon.ico, the PNG sizes a site needs, and the HTML to declare them.
Check a downloaded file against its published checksum, without uploading anything.
Stamp text like DRAFT or CONFIDENTIAL across a PDF, in your browser.
Escape text for HTML, or turn entities back into readable characters.
See how savings grow with compounding, including regular contributions.