My Tool Studio
Developer

CSS Beautifier

This CSS beautifier turns minified or cramped stylesheets into clean, indented rules you can read and edit. Paste a whole stylesheet on one line, a snippet from DevTools, or upload a .css file, then click Beautify. Each selector starts a new block, each declaration sits on its own line, and rules inside @media are indented a level deeper. Options cover the indent, a blank line between rules, one selector per line, spaces around > + ~ and keeping your blank lines. Sort properties A to Z puts declarations in alphabetical order, and Minify instead does the opposite job in the same pane. You can also format several files at once and download a ZIP. Formatting uses js-beautify in your browser.

Always freeNo sign upRuns in your browser
Output appears here...

Beautify several CSS files

Add several files, put them in order, then process them all with the options above. Files stay in your browser.

How to use

01

Paste or upload CSS

Paste your stylesheet into the Input pane, or click Upload .css to load a file, which is formatted straight away. Try sample loads a one-line stylesheet with a media query.

02

Set options and click Beautify

Pick an Indent and tick the layout options you want, including Sort properties A to Z. Click Beautify, or turn on Live mode so the output follows your edits. Minify instead squeezes the same input onto one line.

03

Copy, download or batch

Click Copy, or Download to save a .css file named after your upload. To format several stylesheets, add them under Beautify several CSS files and download a ZIP or one combined file.

Why CSS Beautifier

Before and after: unminify CSS in one click

The sample is a small stylesheet squeezed onto one line: .hero{padding:16px;background:#fff;color:#000}.hero h1{font-size:48px;margin:0} followed by a media query and a hover rule.

After you click Beautify, each block opens with its selector and a brace on one line, every declaration sits on its own indented line with a space after the colon, and each closing brace gets its own line. The rule inside @media (max-width:600px) is indented one level further. The two selectors in .btn:hover,.btn:focus land on separate lines. The options change only the layout:

OptionWhat it does
Indent: 2 spacesIndents declarations by two spaces. The default.
Indent: 4 spacesIndents declarations by four spaces.
Indent: TabIndents with one tab character per level.
Blank line between rulesAdds an empty line after each closing brace. Untick it for a more compact file.
Each selector in a list on its own lineSplits .a,.b onto separate lines. Untick to keep lists on one line.
Keep existing blank linesKeeps empty lines you already had between rules.
Spaces around > + ~Writes .nav > li + li instead of .nav>li+li.
Sort properties A to ZOrders declarations alphabetically inside each rule.

Common questions

How do I unminify a CSS file?
Click Upload .css and choose the minified file, or paste its contents and click Beautify. Then use Download to save the readable version. Comments that were stripped during minifying cannot be brought back.
Does beautifying CSS change any values?
No. It only changes whitespace and line breaks, so selectors, properties and values stay as they were. The one exception is Sort properties A to Z, which reorders declarations inside a rule; leave it off if a rule relies on order, such as a shorthand that follows a longhand.
Can I format SCSS or LESS with this CSS beautifier?
Simple nesting and variables often format fine because the syntax looks like CSS. Mixins, functions and some LESS features may not indent as expected, since the tool is built for plain CSS. For a Sass or Less project, Prettier supports both languages.
What indentation is standard for CSS?
There is no official standard. Two spaces is the most common choice and is Prettier's default, while four spaces and tabs are also widely used. Pick one and keep it consistent across the project.
Is my CSS uploaded when I format it here?
No. Pasted code and uploaded files are both processed by JavaScript in your browser. Nothing is sent to a server or saved.
Why does the CSS beautifier put each selector on its own line?
When a rule has a list of selectors, such as .btn:hover,.btn:focus, the formatter puts each one on a separate line so long lists are easy to scan. Untick Each selector in a list on its own line to keep them together. The rule still applies to every selector either way.
Can I minify CSS again after beautifying and editing it?
Yes. Click Minify instead on this page, or use the CSS Minifier, which also keeps license comments, shortens colors and shows the bytes saved.
Does a stylesheet on one line break the CSS formatter?
No. The formatter reads the CSS as a stream of tokens, so a whole file on one line formats the same way as a neatly spaced one.
Can VS Code beautify CSS without an extension?
Yes. Open the file and run Format Document, which is Shift+Alt+F on Windows and Shift+Option+F on macOS. Extensions such as Prettier add more options. This page is handy when you just want to paste, format and copy without opening an editor.
Should I sort CSS properties alphabetically?
It is a matter of team style. Alphabetical order makes a property easy to find and stops duplicates hiding in long rules, while other teams group by type, such as layout, then box model, then typography. Tick Sort properties A to Z to try it; vendor prefixes sort next to the property they belong to.

More Developer tools

View all

JSON Formatter

Beautify, minify and browse JSON as a tree

Developer

JSON Validator

Find JSON errors by line and fix them

Developer

JSON Minifier

Minify JSON and see the bytes saved

Developer

JSON to CSV Converter

Convert JSON arrays to CSV or Excel

Developer