CSS formatter
Beautify minified CSS into one declaration per line, with @media blocks indented and selectors split the way you prefer.
Input
Result
The result will appear here.Minified CSS from a CDN or a production build is unreadable on purpose. This expands it with the CSS beautifier from js-beautify: one declaration per line, a blank line between rules, @media and @supports blocks indented, and combinators such as > given room to breathe. It is what you want for reading a third-party stylesheet, checking what a build actually shipped, or tidying hand-written CSS before it goes into a pull request.
How it works
- Each selector in a comma-separated list gets its own line by default; turn that off to keep .card, .panel together.
- Comments stay where they were, including the /*! licence banners that minifiers keep.
- Values are left exactly as written — colours, units and custom properties are re-spaced, never rewritten.
Where your data goes
Nowhere. This tool runs entirely in your browser: the text you paste is processed by the page and is never transmitted to a server or written to a log.
This tool is free and needs no account. Its results exist only in your open page and are not saved anywhere.
What it costs
This tool is free, with no sign-in and no points.
Common questions
- Does it fix or validate my CSS?
- No. It only changes whitespace, so a missing semicolon or a misspelt property comes out formatted but still broken. Formatting does make such mistakes easier to spot, because every declaration ends up on a line of its own.
- Does it support SCSS or Less?
- Partly. js-beautify's CSS mode copes with nesting and most SCSS and Less syntax well enough to read, but mixins with complex arguments and some interpolation can be spaced oddly. For source files you commit, Prettier with its SCSS parser is the safer choice.
- Can formatting change how the page looks?
- It should not. Whitespace between declarations and around selectors has no effect on rendering. The only exception is the rare old browser hack that depends on exact whitespace, which modern stylesheets no longer contain.
The open-source behind it
This tool runs on beautifier/js-beautify, released under MIT. If you need the same behaviour inside your own program, that is the library to reach for.
beautifier/js-beautifyAlso known as
- css formatter
- css beautifier
- unminify css
- format css online
- css pretty print
- css prettify