Developer tool / 16

CSS Formatter & Prettifier

Format, indent, and expand CSS rules, selector lists, and property declarations into readable code.

CSS Formatter & Prettifier: TOEA parses CSS rules, media queries, and declarations, normalizing property spacing and block indentation. Runs 100% locally in your browser with zero server file uploads.

Category: Developer tools
Runs: In your browser
Cost: Free · no sign-up
Availability: Ready to use

CSS Formatter & PrettifierLocal processing

Runs entirely in your browser

Prettified CSS Output

body {
  font-family: system-ui,sans-serif;
  line-height: 1.5;
  color: #333;
  margin: 0;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: #f8f9fa;
}

.header a {
  color: #0066cc;
  text-decoration: none;
}

.header a:hover {
  text-decoration: underline;
}

@media (max-width:600px) {
  .header {
    flex-direction: column;
    padding: 1rem;
  }
}

Reading someone else's stylesheet

Formatting a minified file makes it readable, but not the same as the source it came from: minifiers merge rules and reorder declarations, so expect grouped selectors and shorthand values. To find which rule styles an element, the browser's developer tools are faster, and their Sources panel can pretty-print a minified file in place. Formatting two versions of a stylesheet and comparing them in the diff checker shows what an update changed.

What formatting leaves alone

The formatter indents and spaces; it does not sort properties, fix misspelled property names, add vendor prefixes, or remove duplicate declarations, so colour: red passes unchanged. Runs of whitespace are collapsed everywhere, including inside quoted strings, so check content values that rely on several spaces. When the file is ready to ship, compress it again with the CSS minifier.

How to use it

Paste raw or minified CSS code.
Select 2-space or 4-space indentation.
Click Format CSS and copy or download the result.

Privacy & limitations

All CSS formatting runs locally in your browser.

Related tools

Frequently asked questions

Does it support @media queries?

Yes, nested at-rules and media queries are formatted with proper indentation.

Does it modify color codes or selectors?

No, formatting adjusts whitespace, indentation, and structure without altering property values.

Free tool · runs in your browser · no account required