How to beautify CSS online with this free CSS beautifier
A CSS beautifier turns minified or messy CSS into readable code without changing what it does. Paste your stylesheet into the CSS Input box and the Formatted Output panel updates as you type or paste, with every rule in its own block, every declaration on its own line and a blank line between top-level rules. Pick 2 spaces, 4 spaces or Tab under Indent, then click Copy Formatted or Download .css, which saves the result as beautified.css.
It runs in your browser; nothing is uploaded (you can check the Network tab in DevTools). There is no account and nothing to install, and the tool sets no size limit of its own, so it is safe for private or unreleased code.
Only layout changes. Selectors, values, quoted strings, url() contents, !important flags and comments are copied as written, so the beautified file behaves like the original. Commas inside parentheses, such as those in linear-gradient(to right,#667eea,#764ba2), are not re-spaced, but any run of spaces or line breaks inside them becomes a single space. The tool does not validate your CSS or flag mistakes in it.
Beautifying is the reverse of minifying, so when the stylesheet is ready to ship, shrink it again with the CSS minifier. Markup and scripts have matching tools in the HTML beautifier and the JavaScript beautifier.
Table of Use: which setting for which job
| Job | What to do | What you get |
|---|---|---|
| Read a minified file copied from DevTools or a CDN | Paste it and keep the defaults | 2-space indents, one declaration per line, a blank line between top-level rules |
| Match a project that indents with tabs | Indent: Tab | One tab character per nesting level |
| Match a project that uses four spaces | Indent: 4 spaces | Four spaces per nesting level |
| Spot repeated properties in one rule | Tick Sort properties alphabetically | Declarations ordered A to Z inside each rule, so repeats sit side by side |
| Point a reviewer to a line | Leave Show line numbers ticked | Numbers in the preview only; the copy and the download have none |
| Format a stylesheet over 3,000 lines | Use Copy Formatted or Download .css | The preview stops at line 3,000; the copy and the download hold everything |
| Tidy CSS that has @media, @supports or @keyframes blocks | Paste it as it is | Inner rules indented one level deeper than the at-rule |
| Tidy source that is really SCSS | Convert it first | Run it through the SCSS to CSS converter, then beautify the CSS |
To check what a beautify pass changed between two versions of a stylesheet, format both and compare them with the text diff tool. For other languages, the SQL formatter, JSON formatter and XML formatter do the same job.
Features
- Three indent styles. The Indent menu offers 2 spaces, 4 spaces and Tab, and the output changes as soon as you switch.
- One declaration per line. Each property is written as
property: value;with no space before the colon, one after it, and a semicolon added after the last declaration in a block. - Nested blocks stay nested. Rules inside @media, @supports, @layer, @keyframes and native CSS nesting are indented one level deeper than their parent.
- Strings, comments and escapes are safe. Quoted text,
url()and data URIs, comments and backslash escapes in selectors, such as the Tailwind class.md\:flex, are copied untouched. - Optional A-Z sorting. Sort properties alphabetically orders each run of declarations by property name, ignoring case. Comments and nested rules stay where they were, and a note appears under the options while it is on.
- Colour-coded preview. Selectors are blue, properties purple, values orange and comments green, with optional line numbers. The preview colours are never part of the copied text.
- Counters. Each panel shows its line and character count, so you can see how much a pass expanded the file.
- Copy, download or clear. Copy Formatted, Download .css and Clear sit under the panels. If the browser blocks clipboard access, the button says to select the text manually.
- Deep nesting reported, not crashed. A stylesheet nested thousands of levels deep shows a message that it could not be formatted instead of freezing the page.
Once the code is readable, you can add rules with the CSS grid generator or the box shadow generator, or translate nested styles with the CSS to SCSS converter.
How to use the CSS beautifier
- Paste your CSS into the CSS Input box. A short minified sample is loaded when the page opens; click Clear to empty the box first.
- Under Formatting Options, open the Indent menu and choose 2 spaces, 4 spaces or Tab.
- Tick Sort properties alphabetically only if you want declarations reordered, and untick Show line numbers if you do not want them in the preview.
- Read the result in Formatted Output. While a large file is being processed the counter shows Formatting… and the buttons wait until it finishes.
- Click Copy Formatted and paste the code into your editor, or click Download .css to save beautified.css.
Who can use it
- Front-end developers reading a minified file from DevTools or a CDN, or checking a stylesheet before they minify the scripts beside it.
- Reviewers and QA testers who need a stable layout so a diff shows real changes instead of formatting noise.
- Students studying how a site is styled, who can also try a snippet in the HTML previewer.
- Designers and site owners cleaning up CSS pasted from a theme editor, and converting the colour codes they find in it.
- Writers of documentation who want a tidy snippet to show in the code syntax highlighter.
FAQs
How do I beautify minified CSS?
Paste the minified CSS into the CSS Input box. The Formatted Output panel fills in straight away, with each rule in its own block and each declaration on its own line. Choose 2 spaces, 4 spaces or Tab under Indent, then click Copy Formatted to put the result on your clipboard or Download .css to save it as beautified.css.
Is my CSS uploaded anywhere when I use this beautifier?
No. It runs in your browser; nothing is uploaded (you can check the Network tab in DevTools). The formatting is plain JavaScript on your device, there is no account, and the page does not keep your stylesheet after you close it, so it is safe to use with private or unreleased code.
Does beautifying change how my CSS works?
No. Only whitespace and layout change, plus tidy-ups the browser ignores, such as adding the last semicolon in a block. Selectors, values, quoted strings, url() contents, !important flags and comments are kept as written. The one option that can change the result is Sort properties alphabetically, which reorders declarations.
Does sorting properties alphabetically change my styles?
It can. Declarations inside a rule are sorted A to Z, so a shorthand such as padding moves ahead of a longhand such as padding-left, and the longhand then overrides part of it: padding-left: 5px; padding: 10px; becomes padding: 10px; padding-left: 5px;, which changes the left padding. Repeats of the same property keep their original order, and comments, nested rules and at-rule statements stay where they were. Leave Sort properties alphabetically unticked unless the order of your declarations does not matter.
Can it format @media, @supports, @keyframes and nested CSS?
Yes. Every block is indented one level deeper than the block that holds it, so rules inside @media, @supports, @layer and @keyframes, and native CSS nesting with &, keep their structure. Statements such as @import and @charset stay on one line each. Properties inside @font-face are formatted as declarations.
Can I beautify SCSS, Sass or Less with it?
It is built for plain CSS. Nested blocks and @include lines come through, but a // line comment is not a CSS comment, so it gets joined to the next line, and variables are left as typed. For SCSS source, run the file through the SCSS to CSS converter first, then beautify the CSS it produces.
Are the line numbers included when I copy or download?
No. Line numbers and the colours for selectors, properties and values exist only in the preview, to make the code easier to read. Copy Formatted and Download .css give you plain CSS text. Untick Show line numbers if you would rather not see them while you work.
Is there a size limit, and why does the preview stop at 3,000 lines?
The tool sets no size limit; your own browser does the work. To keep the page responsive, the preview shows only the first 3,000 lines of a very long result and says so under it. Copy Formatted and Download .css always contain the complete formatted stylesheet, not just the lines you can see.