StyleSnap — Instant CSS Inspector

About

StyleSnap is the fastest way to inspect CSS on any webpage. Just hover over any element to see all its computed styles, organized by category.

FEATURES:

• Hover to Inspect — Move your cursor over any element to instantly see its CSS properties (typography, layout, spacing, colors, borders, effects, and more)

• Multiple Copy Formats — Copy styles as plain CSS, Tailwind classes, SCSS variables, or JavaScript objects with one click

• Full-Page Screenshots — Capture entire pages as PNG or PDF. Automatic scroll-and-stitch handles pages of any length

• Box Model Visualization — See margin, padding, and content areas with color-coded overlays

• DOM Keyboard Navigation — Use arrow keys to traverse parent, child, and sibling elements

• Pin & Compare — Click to pin the panel on any element. Click another element to compare styles side by side

PRO FEATURES (optional upgrade):

• Export any element as a React component (JSX + inline styles)
• Export as Vue Single File Component with scoped styles
• Export as clean HTML + CSS, ready to paste into any project

HOW TO USE:

1. Click the StyleSnap icon or press Alt+S to activate
2. Hover over any element to inspect its styles
3. Click to pin the panel, press Escape to unpin
4. Use the copy button to grab styles in your preferred format

Zero dependencies. Works on any website. Lightning fast.