CSS Formatter & Beautifier
Format stylesheets with consistent indentation. Free, and runs entirely in your browser — nothing you enter is uploaded, stored or sent to a server.
About CSS Formatter
Stylesheets arrive minified, with inconsistent brace styles, or as a wall of vendor prefixes. This normalises them: one declaration per line, consistent indentation, nested at-rules such as @media and @supports indented to their real depth.
The common use is reading someone else's compiled CSS — checking which selector actually sets a colour, or comparing two builds of the same stylesheet where a diff on minified output would be worthless.
Where it helps
- Makes a minified stylesheet readable in one step.
- Handles nested at-rules and keyframe blocks.
- Consistent output makes two builds directly comparable in a diff.
- Local processing, so proprietary stylesheets stay private.
Limits
- It reformats, it does not lint — invalid properties and typos pass through untouched.
- Comments and declaration order are preserved rather than tidied, since both can matter in CSS.
- Preprocessor syntax (Sass, Less nesting, mixins) is not understood; format those with their own tooling.
- Shorthand and longhand are left as written, so it will not point out a conflict between them.
Frequently asked questions
Does it change my selectors or their order?
No. Order determines the cascade, so nothing is reordered — only whitespace and line breaks change.
Can it expand shorthand properties?
No, and that is deliberate: margin: 0 auto and its longhand equivalents behave differently in some contexts.
Will it work on Sass or Less?
Only on the compiled CSS. Preprocessor-specific syntax needs the preprocessor's own formatter.
Why is my @media block indented further?
Because its declarations sit one level deeper than the top-level rules. That is the structure the browser sees.
Related tools
- HTML Formatter — Indent and tidy HTML markup
- JavaScript Formatter — Re-indent JavaScript and TypeScript source
- Minifier — Shrink CSS, HTML or JavaScript
- Color Converter — Convert between hex, RGB, HSL, HWB, LAB, OKLCH and more
- SCSS/SASS Formatter — Format SCSS syntax and nested rules
- TypeScript Formatter — Format TypeScript source code
More Web Development tools
- HTML Formatter — Indent and tidy HTML markup
- JavaScript Formatter — Re-indent JavaScript and TypeScript source
- SCSS/SASS Formatter — Format SCSS syntax and nested rules
- TypeScript Formatter — Format TypeScript source code
- SQL Formatter — Format SQL statements with dialect selection
- SQL Minifier — Collapse formatted SQL into compact text
- CSS Unit Converter — px, rem, em, percentages and viewport units, with a preview
- Query String Parser and Builder — Convert query strings into editable key-value data
- CSP Generator — Build a Content-Security-Policy, or check one, and write it for your server or framework
- CORS Generator — Write CORS configuration for nginx, Express, Go, Django, ASP.NET, Spring and more, and test an origin against it
- cURL Builder — Build an HTTP request and get it as curl, JavaScript, TypeScript, Go, Python, PHP, C#, Java and more
- Minifier — Shrink CSS, HTML or JavaScript
- Flexbox Playground — Try every flex property and read the CSS back
- CSS Grid Playground — Build a grid template and see the tracks it makes
- Responsive Viewport Tester — Render your markup at phone, tablet and desktop widths
- SVG Path Viewer — Draw path data and read back what it contains
- SVG to CSS Converter — Turn an SVG into a data URI for CSS or an img tag
- OAuth 2.0 / OIDC Helper — PKCE verifiers and challenges, state, nonce, and checking what came back
- Regex Tester — Test patterns, inspect groups and preview replacements
- User-Agent Parser — Identify the browser, engine, operating system and device behind a User-Agent string
- HTTP Status Codes — Look up what a status code means, when to send it, and whether it is cached or safe to retry
- HTML to JSX — Convert HTML and SVG markup into JSX for React, with styles, attributes and whitespace handled
- Semver Checker — Test versions against npm ranges, sort them by precedence, and see what each bump produces
- Cookie Parser and Builder — Read Set-Cookie and Cookie headers, check them against browser rules, and write one for your framework