Input
Developer utility
CSS Formatter
Format, minify, inspect, and copy CSS with readable output, selector statistics, rule summaries, and lightweight validation hints directly in your browser.
Paste CSS to format, minify, and inspect selectors.
Size0 B
Rules0
Selectors0
Declarations0
Output
Formatted or minified CSS
Validation hints
CSS issues and warnings
Selectors
Selector and declaration summary
| # | Selector / at-rule | Declarations | Properties |
|---|
Preview
Sample rendered with your CSS
Preview card
This sample uses common class names such as .card, .button, and .badge.
Examples
Common CSS samples
CSS quick reference
| Concept | Example | Notes |
|---|---|---|
| Rule | .card { padding: 16px; } | Selector plus declaration block. |
| Declaration | color: #333; | Property and value separated by a colon. |
| Custom property | --accent: #16735f; | Reusable CSS variable. |
| Media query | @media (max-width: 640px) | Applies nested rules conditionally. |
| Keyframes | @keyframes fade | Defines animation steps. |
CSS formatter FAQ
Is this CSS formatter private?
Yes. CSS formatting, minifying, and inspection run locally in your browser.
Can this replace a full CSS linter?
No. It provides practical browser-side hints, but full compatibility and lint checks still need a dedicated CSS parser or build pipeline.
Does minifying CSS change behavior?
It should preserve ordinary CSS behavior, but review output when CSS contains unusual strings, comments used by tooling, or legacy hacks.