CSS Formatter | Beautify Selectors and Media Queries
Reformat CSS selectors, declarations, media queries, and nested blocks with consistent spacing for easier review.
Beautify CSS Rules for Review
Format selectors, declarations, media queries, comments, and nested-looking blocks so stylesheet edits are easier to scan before a commit or publish.
Check Selectors After Formatting
Formatting improves readability but does not validate whether selectors, custom properties, vendor prefixes, or media queries work in every browser. Test critical CSS after editing.
Where CSS Formatting Fits
Use it for compressed snippets from themes, page builders, bug reports, emails, or copied examples that need readable spacing before debugging.
About This Tool
CSS Formatter takes minified or inconsistently indented CSS and outputs it with consistent nesting, readable spacing, and proper structure. It also validates the syntax and highlights errors so you can find problems without scanning compressed code.
When to Use It
Use this when debugging a minified CSS file downloaded from a production site, when reviewing a colleague's stylesheet with inconsistent formatting, or when preparing CSS for a code review.
How to Use
- Paste your CSS into the input area.
- Click Format to apply indentation and structure.
- Review any validation warnings.
- Copy the formatted CSS.
Frequently Asked Questions
Does it reorder CSS properties?
You can choose to sort properties alphabetically or by category to enforce a consistent ordering convention across your codebase.
Can it also minify CSS?
Yes. A minify option removes whitespace and comments to produce compact output for production deployment.
Does it support CSS variables and modern features?
Yes. Custom properties, calc(), grid, and flex shorthand are all formatted correctly.