Home›Formatters›Code›CSS Formatter

CSS Formatter

Code

Beautify raw or minified CSS with proper indentation and one rule per line. Runs entirely in your browser — your stylesheets are never uploaded anywhere.

What is a CSS?

The CSS Formatter restructures raw, minified, or poorly indented CSS into a clean, readable stylesheet with consistent indentation, one declaration per line, and a blank line between each rule. It is the standard step between receiving or generating compact CSS and editing it as a human.

CSS delivered from a CDN, a bundler, or a third-party library is almost always minified — all whitespace removed so it transfers as few bytes as possible. This makes it fast to download but completely unreadable:

body{margin:0;padding:0;font-family:sans-serif}h1{color:#1A1A2E;font-size:2rem;font-weight:700}.container{max-width:1200px;margin:0 auto;padding:0 1rem}

The CSS Formatter expands this into a structured stylesheet where every selector opens on its own line, every declaration is on an indented line with a semicolon, and each rule is separated by a blank line — the format your editor would produce if you had written the CSS yourself.

The formatter also includes an optional property-sorting step that arranges declarations alphabetically within each rule block. Sorted properties eliminate inconsistency across a team's stylesheet contributions and make a specific property easy to locate by scanning vertically rather than reading every line.

All formatting runs entirely in your browser. No CSS you paste is ever sent to a server or stored anywhere. This makes it safe to use with proprietary stylesheets, internal brand tokens, or any CSS that contains confidential design details. You can also use the SQL Formatter and JSON Formatter for other structured text formats.

How to use this CSS calculator

  1. Paste your CSS into the Raw CSS input box — this can be minified, hand-written with inconsistent indentation, or copied from DevTools.
  2. Choose an Indent Size from the dropdown: 2 spaces (default) or 4 spaces.
  3. Optionally enable Sort properties alphabetically to arrange declarations in each block in A–Z order.
  4. The Formatted CSS output updates instantly in the output box.
  5. Click Copy to copy the formatted CSS to your clipboard for use in your editor or project.

Formula & Methodology

The formatter processes CSS in a single pass over the source string, treating {, }, and ; as structural delimiters:

1. Strip block comments — /* ... */ blocks are removed entirely before formatting begins.
2. Normalise whitespace — all whitespace runs (spaces, tabs, newlines) are collapsed to single spaces.
3. Scan for { — everything before it is the selector, printed on its own line followed by  {.
4. Scan for } — the content between { and } is split on ; into individual declarations, each printed as <indent><property>: <value>;. If sort is enabled, declarations are sorted alphabetically before printing.
5. Close the block — } is printed on its own line, followed by a blank line to separate rules.

Before:
css body{margin:0;padding:0;font-family:sans-serif}h1{color:#1A1A2E;font-size:2rem} 

After (2 spaces, sorted):
css body {   font-family: sans-serif;   margin: 0;   padding: 0; }  h1 {   color: #1A1A2E;   font-size: 2rem; }
Frequently Asked Questions
What is a CSS formatter?
A CSS formatter (also called a CSS beautifier) restructures compact or minified CSS into a readable layout with one declaration per line, consistent indentation, and blank lines between rules. Raw or minified CSS runs all selectors and properties together in a single block of text that is difficult to scan and edit. A formatter separates these into a structured, human-readable form without changing the visual result in the browser.
Why is formatted CSS easier to maintain?
When CSS is compressed into a single line, finding and editing a specific property means scanning hundreds of characters. A formatted stylesheet with one rule per block and one declaration per line lets you jump to the selector, read the properties vertically, and edit only the line you need. This also makes code review diffs meaningful — a change to `color` shows as a single modified line rather than a character buried in a long minified string.
Should I use 2 or 4 spaces for CSS indentation?
Two spaces is the most common CSS convention — it is the default in most editors and style guides including Google's HTML/CSS style guide. Four spaces produces more generous indentation that can improve readability in deeply nested selectors (such as BEM modifier chains). Neither choice affects how the browser renders the stylesheet.
What does 'Sort properties alphabetically' do?
When this option is enabled, the declarations inside each rule block are rearranged into alphabetical order by property name — so `background` comes before `border`, which comes before `color`. Alphabetical ordering makes it easier to scan for a specific property without reading every line, and it eliminates disputes in code reviews about whether `margin` should come before or after `padding`. Some teams enforce this with Stylelint.
Does the CSS formatter handle media queries and nested rules?
Yes. The formatter handles any CSS construct that uses curly braces — standard rules, media queries, keyframe animations, and pseudo-selectors. Each `{` opens a new indented block, and each `}` closes it. Deeply nested CSS (such as `@supports` inside `@media`) is indented correctly at each level.
Can this fix invalid CSS?
No. The CSS Formatter is a whitespace and structural reformatter, not a validator. It rearranges tokens around `{`, `}`, `;`, and `:` without parsing the CSS grammar. Invalid CSS — such as unclosed braces or malformed property values — may produce unexpected output rather than an error message. To validate CSS, use the W3C CSS Validator after formatting.
How do I format CSS?
Paste your CSS into the Raw CSS box, choose an indent size from the Indent Size dropdown (2 or 4 spaces), and optionally enable Sort properties alphabetically. The formatted output appears instantly in the Formatted CSS box. Click the Copy button to copy it to your clipboard.
Is my CSS uploaded anywhere?
No. All formatting happens entirely in your browser using JavaScript. The CSS you paste — including any proprietary class names, colours, or layout details — is never sent to any server, stored, or logged. You can safely use the formatter with private stylesheets.
Does this work offline?
Yes — once the page has loaded, the CSS Formatter runs without a network connection. All processing is a pure JavaScript string operation that executes locally in your browser.
Can I use this to format SCSS or Less?
The CSS Formatter works best with standard CSS. It will handle basic SCSS and Less syntax correctly as long as there are no preprocessor-specific constructs like nested rules within rules or mixin calls — these may produce unexpected indentation. For SCSS and Less, a dedicated tool or your editor's built-in formatter (Prettier, Stylelint) is more reliable.
What happens to CSS comments?
The formatter strips block comments (`/* ... */`) before formatting to simplify the output. If your CSS has important comments (license headers, TODO notes, section markers), add them back manually after formatting. Inline comments within property values are also removed.

Related Calculators

code
SQL Formatter
Format and beautify SQL queries with proper indentation and keyword ca…
code
JSON Formatter/Beautifier
Paste raw JSON and instantly beautify it with proper indentation, or m…
code
Code Minifier
Strip whitespace and comments from HTML, CSS, or JavaScript to reduce …