What is CSS Prettify?

A CSS formatter is a tool that parses a CSS stylesheet and re-emits it with each declaration on its own line, consistent two-space indentation inside selectors, and a single space after every colon so the file matches the style produced by Prettier and stylelint --fix. The cascade and specificity never change. Only the presentation does.

Frontend developers, design system maintainers, and email-template authors reach for a CSS formatter when minified production CSS needs to be inspected, when a Tailwind layer file accumulates inconsistent spacing, or when a contributor’s pull request mixes one-line and multi-line declaration styles.

Why use a CSS formatter?

Make minified CSS reviewable. Production CSS from a build pipeline arrives as one long line per rule. Prettifying it is the only way to inspect what the framework actually shipped to the browser.
Spot duplicate or shadowed declarations. When every property is on its own line, repeated color or display values inside the same rule jump out, which makes overrides easier to remove.
Standardize selector grouping. Some authors put each selector in a comma-separated group on its own line; others run them together. The formatter picks one and applies it consistently.
Surface parse errors. A real CSS parser refuses to format malformed rules. A missing closing brace or an unterminated string surfaces immediately rather than silently breaking part of the stylesheet.

How to use the CSS Prettify tool

Paste your CSS into the Input panel. Selectors, at-rules, and CSS custom properties all parse.
Click Prettify. The stylesheet is reflowed with two-space indentation and one declaration per line.
Read the rewritten CSS in the Output panel. Parse errors appear above the input with a line reference.
Click Copy to copy the formatted CSS to your clipboard.

CSS formatting rules

The formatter applies the conventions in Prettier’s CSS parser and the recommended defaults in stylelint.

Element	Convention
Indentation	2 spaces per level
Selector groups	Each comma-separated selector on its own line
Opening brace	Single space before `{`, on same line as selector
Declaration	One property per line, single space after `:`, semicolon at end
Closing brace	On its own line, no indentation beyond the block opener
Color values	Lowercase hex (`#fff`, not `#FFF`)
Zero units	`0` without unit where allowed (`0` instead of `0px`)
Quote style	Double quotes around string and URL values
At-rules	`@media`, `@supports`, `@keyframes` indented like nested blocks
Comments	`/* */` preserved in place

Examples

A minified production CSS rule:


.btn,.btn-primary{display:inline-flex;align-items:center;padding:8px 16px;background:#3B82F6;color:#FFFFFF;border-radius:4px;font-weight:600}.btn:hover{background:#2563EB}

After prettifying, each selector and declaration is on its own line:


.btn,
.btn-primary {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: #3b82f6;
  color: #ffffff;
  border-radius: 4px;
  font-weight: 600;
}
 
.btn:hover {
  background: #2563eb;
}

Common use cases

Frontend developers inspecting compiled Tailwind, Sass, or Less output to debug specificity conflicts in production.
Design system maintainers standardizing token files and component stylesheets across a Storybook or Chromatic library.
Email developers cleaning up inlined CSS from MJML or Foundation-for-Emails output before QA testing.
CMS implementers reformatting custom CSS pasted from WordPress, Webflow, or Squarespace customizer fields.

Frequently asked questions

Does this CSS formatter change the rendered page?

No. Every transformation is whitespace and structural. The browser interprets the formatted stylesheet exactly the same way as the original, including specificity, cascade order, and inheritance.

Does it work on Sass, Less, or PostCSS files?

The formatter targets standard CSS syntax. Sass (.scss), Less (.less), and most PostCSS plugins compile to standard CSS before deployment, so the compiled output formats cleanly. For source files, run the project’s own formatter through prettier with the --parser scss or --parser less option.

Will it preserve my CSS custom properties?

Yes. Variable declarations like --primary: #3b82f6 and var() references are preserved exactly. The formatter does not rename, fold, or compute any custom property values.

Does it handle CSS-in-JS?

No. Template-literal CSS inside JavaScript or TypeScript files is not parsed. For Emotion, styled-components, or vanilla-extract, use the Prettier plugin built for your library, or run a separate JavaScript formatter.

Will it normalize my color values?

Hex colors are lowercased (#FFF becomes #fff). The formatter does not convert between hex, rgb, and hsl, and does not shorten #ffffff to #fff. For color normalization across formats, use a dedicated color tool.

Does it remove unused selectors?

No. Removing dead CSS is the job of a tool like PurgeCSS or the built-in tree-shaker in Tailwind, which need to inspect the HTML or JSX to know what is in use.

Can it format `@media` and `@supports` blocks?

Yes. Nested at-rules are indented one level deeper than their parent and follow the same declaration rules inside. @keyframes blocks are formatted with each percentage step on its own line.

YAML Formatter - clean up YAML config files used in build pipelines.
SQL Formatter & Beautifier - pretty-print SQL queries with standard keyword casing.
Markdown Formatter - normalize headings, lists, and code blocks across Markdown files.
CSS Minifier - collapse formatted CSS back into a single line for production.