peartools

CSS Formatter and Beautifier

Paste minified or messy CSS and get it back with one declaration per line and everything indented. Or go the other way and minify your styles to make the file smaller. Everything runs in your browser, so your code stays on your device.

Indent
Result

What a CSS formatter does

CSS is often shipped minified, with all the whitespace removed so it loads faster, which makes it very hard for a person to read. A formatter, also called a beautifier, does the reverse: it rewrites the styles with one declaration per line and consistent indentation, so the structure is clear. This tool formats your CSS for reading and can minify it again when you are ready to ship. It changes only the spacing, never how your styles apply.

Why use our CSS beautifier

  • ·Free. No signup, no paywall, no limits.
  • ·Runs in your browser. Your styles are never uploaded, so it is safe for private projects.
  • ·Beautify or minify. Clean it up for reading, or shrink it for production, in one place.
  • ·Your house style. Choose 2 or 4 space indentation to match your project.
  • ·Syntax highlighting. The editor colours selectors, properties, and values, and lets you collapse and expand rules.

CSS formatter options

Format

Rewrites your CSS with one rule per line, one declaration per line, and consistent indentation. Turns minified or messy styles into clean, readable code.

Before.a{color:red;margin:0}After.a { color: red; margin: 0; }

Minify

Removes comments and the extra spaces and line breaks to make the file smaller. Good for shipping CSS to production so pages download a little faster.

Before.a { color: red; }After.a{color:red}

Indent

Choose 2 or 4 spaces for each level of nesting, so the formatted CSS matches the style used in the rest of your project.

Before2 spaces or 4 spacesAfterYour choice per level

When to format CSS

A formatter helps whenever a stylesheet is hard to read or needs to be smaller. These are the cases that come up most:

  • ·Reading a site's styles. Paste minified CSS you copied from a page to see how it is built.
  • ·Cleaning up a snippet. Fix the indentation of styles from a CMS, a plugin, or a code generator before you edit them.
  • ·Shrinking for production. Minify a stylesheet so it downloads a little faster.
  • ·Learning CSS. See how a stylesheet is structured while you are still learning.

Learn more about CSS

Once your CSS is formatted, these standard references explain how each part actually works:

Run the same CSS formatter in your project

This tool formats CSS with Prettier, which most front end projects already use. To apply the same formatting to your stylesheets:

ToUse
Format every CSS filenpx prettier --write "**/*.css"
Check without changing filesnpx prettier --check "**/*.css"
Keep settings in the repoAdd a .prettierrc file with your "tabWidth"

Prettier sorts nothing and changes no values, so the order of your rules and properties stays exactly as you wrote it.

Related formatters

Working across stylesheets and markup? These formatters run the same way, right in your browser:

Frequently asked questions

What is a CSS formatter?
A CSS formatter takes stylesheet code that is minified or has messy spacing and rewrites it with one declaration per line and consistent indentation, so it is easy to read. It does not change how your styles work, only how the code is laid out. This tool formats your CSS and can also minify it back down.
How do I format CSS?
Paste your CSS into the input box, pick your indentation, then click Format. The clean version appears below. Click the copy button to copy it, or download it as a .css file.
What does minify do?
Minify removes comments and the extra whitespace between rules and declarations, which makes the file smaller. Smaller CSS loads a little faster, so minified stylesheets are common in production. The styles still apply exactly the same way.
Does formatting change how my styles work?
No. Formatting only adds or removes whitespace and reindents the code. The selectors, properties, and values stay the same, so the page looks exactly as before. Only the layout of the source changes.
Is this a CSS beautifier?
Yes. Format and beautify mean the same thing here: taking messy or minified CSS and laying it out cleanly with proper indentation. Some people call it a CSS beautifier, prettifier, or pretty printer.
Is my CSS kept private?
Yes. All formatting and minifying runs in your browser. Your CSS is never uploaded to a server or saved anywhere, so you can safely paste in styles from a private project. Once the page has loaded you can even use it offline.