Format and beautify messy CSS code with proper indentation.
The CSS Formatter beautifies CSS, SCSS and Less using Prettier. Strings, comments and data: URLs are preserved exactly, and syntax errors are reported with their line and column. It runs in your browser.
Made for developers. Typical uses:
The single line .container{display:flex;gap:1rem}.btn:hover{color:red} becomes two rules, each with its declarations on separate lines indented by two spaces, a space after every colon and a closing brace on its own line. The values (flex, 1rem, red) are unchanged.
It only changes layout, not the rules, so it will not repair errors, restore comments that a minifier removed or check that a property works in browsers. SCSS and Less must be selected in the language menu, or nested rules and variables are reported as errors. To shrink a stylesheet instead, use the CSS Minifier.
Accuracy: Output is tested against known inputs. For production code, review the result and run your own tests.
Expert Tip
Paste a minified third-party stylesheet in here to see its structure, and use the same Prettier settings as the rest of your project so your formatted CSS matches what your editor produces.
The CSS Formatter turns compressed or untidy stylesheets into clean, consistently indented code. It uses Prettier, the formatter most teams already use, so the layout it produces matches what editors and code review tools expect. You paste your CSS, choose CSS, SCSS or Less, pick an indent of 2 spaces, 4 spaces or tabs and a line width of 80, 100 or 120, and press Format. The result can be copied or downloaded as formatted.css.
The single line .container{display:flex;gap:1rem}.btn:hover{color:red} becomes a tidy block: .container on its own line with an opening brace, display: flex; and gap: 1rem; indented by two spaces on their own lines, a closing brace, and then the .btn:hover rule laid out the same way. A space is added after each colon and braces get their own lines, but no value changes: gap is still 1rem and the colour is still red.
Formatting changes whitespace only. Strings, comments and data: URLs are preserved exactly. The formatter does not reorder properties, merge rules, change colours from hexadecimal to names, or add vendor prefixes. This means it is safe to run on any stylesheet, and the formatted file behaves exactly like the original. If the CSS has a syntax error, the tool reports it with the line and column instead of guessing.
Choose SCSS or Less in the language menu for files that use nesting, variables or mixins. Prettier understands those syntaxes, so it indents nested rules and keeps variable declarations intact. Pasting SCSS while CSS is selected may cause an error, because nested rules and variables are not valid CSS, so choose the language that matches the file.
The most common use is reading someone else's minified stylesheet: paste it in and the structure becomes visible. Teams also use a formatter to remove arguments about style in a code review, and to clean up CSS pasted from a tutorial or exported from a design tool. After formatting, check that the code is valid with the CSS Validator, and when you are ready to publish, shrink it with the CSS Minifier. If you need to convert units, the CSS Unit Converter changes pixels, rems and viewport units, and the Color Converter converts HEX colours.
Comments that a minifier already removed cannot be restored, and the formatter does not fix errors or check that a property is valid in browsers. It formats one document at a time, and everything runs in your browser, so a private stylesheet is never uploaded. If your project already uses Prettier, choose the same indent and line width here so the output matches what your editor produces, and a pasted snippet will not show up as a style change in code review.
What minifying removes, how much it saves next to gzip and Brotli, and how to test minified CSS, JavaScript and HTML before you deploy it.
Explore more in Developer Tools, read the guides and articles, or see how we test our tools.
Minify and compress CSS stylesheets to reduce file size.
Best for shrinking a stylesheet before deploying it to a production website to reduce load time
Format and beautify messy HTML code with proper indentation.
Best for beautifying minified HTML for editing
Format and beautify JavaScript code with proper indentation.
Best for making a minified third-party script readable enough to debug in dev tools
Validate CSS code for syntax errors and compliance with W3C standards.
Best for catching a missing semicolon or unclosed brace that's silently breaking a stylesheet
Convert between CSS units like px, em, rem, vw, vh, and percentages.
Best for converting a fixed px value from a Figma or Sketch mockup into rem for scalable, accessible typography
Convert colors between HEX, RGB, HSL, CMYK, and more formats.
Best for converting a HEX color from a design file into RGB for code or a library