Tidy stylesheets in one click
Paste CSS from a minified bundle, a browser's dev tools or an old theme, and the formatter puts one declaration per line, indents nested blocks such as @media and @supports, and adds consistent spacing around selectors and braces.
Modern CSS — custom properties, calc(), grid templates, nesting and long selector lists — is handled without breaking values. Pick your indent size, then copy the result or save it as a .css file.
How to format CSS
- 1
Paste your CSS
Or open a .css file.
- 2
Choose the indent size
2 or 4 spaces, or tabs.
- 3
Copy or download
Use the formatted stylesheet.
Key features
One property per line
Easy to scan and diff.
At-rules indented
Media queries and supports blocks are nested clearly.
Modern syntax
Variables, calc() and grid values stay intact.
Private
Runs entirely in your browser.
Common uses
- Reading minified CSS: Understand a site's styles before overriding them.
- Cleaning old themes: Standardize formatting before refactoring.
- Learning CSS: See how a stylesheet is structured.
Tips and good to know
- Ready for production? Shrink the file with the CSS Minifier.
- Building a background? The CSS Gradient Generator writes the gradient code for you.
Frequently asked questions
Does formatting change how my CSS works?
No. Only whitespace changes; selectors, properties and values stay exactly the same.
Does it support SCSS or Less?
Plain CSS works best. Simple SCSS usually formats fine, but mixins and other preprocessor features may not be indented perfectly.
Can it format CSS inside HTML?
Use the HTML Formatter for full pages; it formats <style> blocks along with the markup.