Toolbox101 All tools

Formatters

Beautify CSS with 4-space indentation

CSS Formatter takes the stylesheet you paste and re-indents it four spaces per nesting level, so a minified one-liner comes back as rules on their own lines with declarations stacked underneath. Developers use it to review vendor output, bundled CSS, and rules copied out of browser DevTools. Selectors, property order, and values are untouched, nothing is sorted, and a blank line separates each rule block so the sheet is easy to scan.

Open CSS Formatter in the app Browse all tools

How to use CSS Formatter

  1. Open CSS Formatter in the Toolbox101 app.
  2. Paste the stylesheet into the CSS box; a minified one-liner or a block copied from DevTools works.
  3. Pick Indent: 2 spaces, 4 spaces (the default) or Tab.
  4. Read the result in the Output box: one declaration per line, and a blank line after each rule block. Selectors, values and property order are unchanged.
  5. Click Copy to put the formatted CSS on your clipboard.

Worked example

CSS Formatter returns the output below for this input.

Input

.card{margin:0 auto;padding:1rem;}.card .title{font-size:1.5rem;font-weight:700;}.card:hover{box-shadow:0 2px 8px rgba(0,0,0,0.1);}

Output

.card {
    margin: 0 auto;
    padding: 1rem;
}

.card .title {
    font-size: 1.5rem;
    font-weight: 700;
}

.card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

Check it yourself: open CSS Formatter and enter the same input.

Frequently asked questions

Why are rule blocks separated by blank lines?

The formatter inserts an empty line between top-level rules so the start of each selector is easy to spot when scanning a long stylesheet. Declarations inside a rule stay single-spaced under their selector, one per line, with four spaces of indent.

Does formatting change or sort my CSS?

No. Formatting adds whitespace only: selectors keep their order, declarations keep their order and their exact values, and nothing is prefixed or vendor-moved. Spaces inside values such as rgb(0, 0, 0) are normalized, but the tokens stay the same. For compact output, run your own minifier.

What is the difference between CSS and HTML formatting here?

Both pages run the js-beautify engine. The HTML Formatter understands markup structure (tags, attributes, inline versus block elements) while this page applies the CSS rules: selector lines, declaration blocks, and blank-line separation between rules. Pick the page that matches the syntax you pasted.

Use CSS Formatter now

Open CSS Formatter in the app

Runs in your browser. Nothing you type is uploaded.