Format CSS rules and inspect selectors, at-rules, custom properties, color tokens, and minified size.
Input / Output
Input, output, and copy actions stay in this main surface. Examples and reference checks are separated below.
Local session
Input state is saved only in this browser so you can restore the last workspace without an account.
Open examples, checks, and related tools only after the primary input/output flow is done.
Review a CSS snippet
Format a CSS snippet, copy the CSS review report, then check minification and color contrast before handoff.
Format the snippet and copy the report with selector, token, cascade, specificity, and checklist signals.
Check compression, comment removal, and the minified review report if compact CSS will be shared.
Check color tokens against WCAG contrast when the snippet changes visible foreground or background colors.
Check color accessibility
Convert foreground/background colors, copy a WCAG contrast report, then review CSS tokens and visual assets before release.
Convert HEX/RGB/HSL pairs, inspect AA/AAA thresholds, then copy the accessibility report.
Review the CSS token names, selectors, and duplicate color values before committing changes.
Check whether brand initials or small icons still read clearly on the chosen background.
Before copying
Common failure cases
Related tools
Guides
Open examples, checks, and related tools only after the primary input/output flow is done.
.card{display:flex;color:#111}@media (min-width:768px){.grid{grid-template-columns:repeat(3,1fr)}}:root{--gap:16px}.panel{padding:var(--gap);border:1px solid #ddd}CSS examples
Selector blocks
1
Declarations
3
Media queries
0
Output lines
5
Inspect selectors, tokens, at-rules, and minified size before copying.
Custom properties
0
No custom properties detected.
Color tokens
1
#111
At-rules
0
No at-rules detected.
Compression ratio
0%
Estimated reduction after whitespace and comment removal.
Selector preview
First selectors found in the snippet.
CSS review report
Copy a handoff report with selector, token, cascade, specificity, compression, warning, and checklist signals.
Output mode
Pretty print
Selector blocks
1
.card
Declarations
3
Custom properties
0
No custom properties detected.
Color tokens
1
#111
At-rules
0
No at-rules detected.
Duplicate selectors
No
ID specificity risk
No
Comments present
No
Compression ratio
0%
Review notes
Review checklist
# CSS review report - Checked at: Browser copy time - Output mode: Pretty print - Characters: 39 - Output lines: 5 - Selector blocks: 1 - Declarations: 3 - Custom properties: 0 - Color tokens: 1 - At-rules: 0 - Duplicate selectors: No - ID specificity risk: No - Comments present: No - Compression ratio: 0% - Raw CSS is excluded from this report; attach a redacted snippet separately if needed. ## Review notes - This lightweight formatter is for small snippets. Run your project formatter before committing large stylesheets. ## Review checklist - Test the CSS at the target breakpoint, theme, and browser before shipping. - Confirm selector order, duplicate selectors, and specificity match the intended cascade. - Compare custom properties and color tokens against the design system before copying. - Preserve license and handoff comments if minifying or pasting into docs. - Run the project formatter or build pipeline before committing large stylesheet changes.
Copy-ready output
.card {
display:flex;
gap:16px;
color:#111
}