SnapCSS

Hover any element, instantly see its CSS, one-click copy.

SnapCSS lets you inspect the CSS of any element on any web page — instantly. Just activate inspect mode, hover over an element, and click to see its full, cleaned CSS in a beautiful floating panel. No more digging through DevTools. KEY FEATURES: • Instant CSS Inspection — Hover to highlight, click to see all CSS properties • Smart CSS Cleaning — Filters out browser defaults, only shows meaningful styles • Original Units — Preserves authored values like rem, em, % • Pseudo-Class Styles — Extracts :hover, :focus, :active styles • Pseudo-Elements — Shows ::before and ::after styles • One-Click Copy — Copy all CSS or click individual properties • Multi-Panel Comparison — Lock panels with Space key for side-by-side comparison • DOM Navigation — Arrow keys to traverse parent, child, and sibling elements • Color Swatches — Visual color previews with click-to-copy • Copy Formats — Standard CSS, CSS Variables, or Minified • Dark & Light Theme — Follows your system or set manually • Bilingual — English and Chinese UI • AI CSS Analysis — Get CSS explanations, optimization and responsive suggestions (BYO API Key) • Accessibility Check — WCAG contrast ratio, AA/AAA compliance, font readability • Multi-Provider AI — Works with major AI providers or your own custom endpoint • Keyboard Shortcut — Alt+C to toggle (customizable) • Zero Dependencies — Core features work offline, AI features use your own API key KEYBOARD SHORTCUTS: • Alt+C — Toggle inspect mode • Click — Select element • Space — Lock panel for comparison • Shift — Pause inspection • Arrow keys — Navigate DOM tree • Escape — Exit inspect mode PRIVACY: SnapCSS runs 100% locally. No analytics, no tracking. AI features are optional and use your own API key. No data is ever sent to SnapCSS servers. Built for frontend developers, UI designers, and anyone who works with CSS.