What this tool does
CSS Formatter understands rules, declarations, and at-rules via Prettier's PostCSS parsing plugin. It does not handle braces with simple character replacement, so it can distinguish between strings, comments, calc() and custom property values.
- Supports common modern CSS, media queries and keyframes.
- Only formats text and does not inject styles into the current page.
- Invalid syntax will display a parser error.
How to use it
- Paste the CSS.
- Select the indent width.
- Click "Format CSS."
- Copy or download formatted.css.
Common uses
- Clean up single-line or hard-to-read stylesheets.
- Unify team code snippet format.
- Helps observe nested media queries and animation structures.
CSS Formatter Features
Parse and beautify CSS selectors, declarations, media queries, keyframes and custom properties. It is suitable for daily development, debugging, data sorting and code optimization scenarios. The processing results can be directly viewed, copied or downloaded.
FAQ
Will custom properties be split incorrectly?
The parser understands CSS declaration context and correctly handles common --custom-property values.
Will formatting change the selector effect?
The goal is to only change the layout; however, it is recommended to retain the source files and test the project before processing with any automated tool.
Will CSS be applied to this page?
No. Both input and output remain in text boxes.