StyleSnap – Hover CSS Inspector & Copier

Hover any element to see its CSS, then copy clean code in one click. Free, with no account, ads or tracking.

StyleSnap shows the CSS behind anything on a web page. Just hover. • Hover to see an element's tag, classes and size, its text and background colours, and its CSS: typography, spacing, borders, shadows and flex/grid layout. • Click to pin, then copy a clean CSS block. Values that match the browser's defaults for that tag are left out, and margin, padding, inset and border-radius shorthands are collapsed. • Smart selectors: StyleSnap writes a short selector that matches only that element on the page. • More formats: copy the element with all its children plus a minimal HTML skeleton, its matching :hover rules, common properties as utility classes, or a JSX style object. • Keyboard friendly: ↑ parent, ↓ first child, ← → siblings, Space to pin, C to copy, Tab into the panel, Esc to exit. • Light and dark panels that follow your system theme, with WCAG AA text contrast. Every feature is free. There is no account, no sign-up and no usage limit. Start StyleSnap with its toolbar button or Alt+Shift+C. It runs only on the tab where you start it, until you close it. Privacy: StyleSnap reads the page's styles on your device. It makes no network requests, stores nothing, and has no analytics, ads or tracking. Your clipboard receives only what you choose to copy. Good to know: computed CSS approximates the styles a site's authors wrote. The :hover export reads only stylesheets the page lets extensions read and does not reproduce the full cascade. Utility classes cover common properties and may need adjusting for your framework. Chrome's own pages, the Chrome Web Store and content inside embedded frames can't be inspected.