CSS Formatter

Consistently formatted stylesheets are easier to scan, easier to review and less likely to hide mistakes such as a missing semicolon or a duplicated property. When everyone on a team formats CSS the same way, changes in version control show only what really changed instead of reflowed whitespace.

Formatting changes only whitespace, line breaks and the style of quotes and similar details; it never changes what the stylesheet does. Selectors, property values, comments and the order of rules stay exactly as they were. That makes it safe to format a stylesheet before reviewing or editing it, and to format a whole project so that future changes show up as small, readable differences in version control.

Choose the language your file is written in. Plain CSS covers modern features such as custom properties, nesting, container queries, cascade layers and the newer colour functions. SCSS adds variables, mixins, nesting with the ampersand and control directives; Less has its own variable and mixin syntax. Formatting a preprocessor file with the matching parser keeps its special syntax intact. If you are unsure, start with CSS — the formatter reports an error when it meets syntax that belongs to SCSS or Less.

Production stylesheets are usually minified: comments removed and everything squeezed onto one line to save bytes. To understand how a website achieves an effect, copy its CSS from the browser's developer tools or the stylesheet URL and paste it here; the formatted version is far easier to read and search. Note that minification removes comments and can shorten values, so the formatted file will not look exactly like the original source. To go the other way and shrink a stylesheet for production, use the CSS Minifier.

Stylesheets can reveal unreleased designs and internal class names, so nothing you paste leaves your device: Prettier runs in your browser. Inputs up to a few hundred kilobytes are formatted live as you type; larger files are formatted when you press Format, so typing stays smooth. If the code has an error — a missing brace, an unclosed string or a stray character — you see the message and its position, and the output stays empty rather than half-formatted.