What this tool does
Format CSS selectors, media queries, keyframes, comments, calc(), and custom properties with 2- or 4-space indentation.
- 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. Review the result, then copy it for use.
FAQ
Will custom properties be split incorrectly?
Common --custom-property values are supported and their contents are preserved.
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.