StyleGrab — Inspect & Copy CSS

Hover any element, copy its CSS — as CSS, Tailwind, JSX, styled-components, Vue or Svelte. 100% local, zero data collection.

Hover any element on any website and see its real, authored CSS instantly — pseudo-classes, media queries, keyframes and all. Copy it in one click as clean CSS, Tailwind, React/JSX, styled-components, Vue, or Svelte. WHY STYLEGRAB DevTools shows you one rule at a time and makes you reassemble the cascade by hand. StyleGrab merges everything that actually applies to an element — :hover states, breakpoints, animations — into one paste-ready block, in the format your project uses. FREE, FOREVER • Hover-inspect any element, instantly • Copy full CSS — pseudo-classes, media queries, keyframes included • Box-model overlay with live measurements • Color eyedropper PRO ($29 once, lifetime updates, 7-day free trial) • Tailwind, JSX, styled-components, Vue, and Svelte export • Copy an element + all its children as portable HTML + CSS • One-click CodePen export • Live CSS editing with real-time preview on the page • Element screenshot — copy any element as a PNG • WCAG contrast checker • Page color palette (with usage counts, copy as CSS variables) and image/SVG asset extraction BUILT DIFFERENTLY • var(--tokens) resolve to real values, so pasted CSS doesn't break • Inherited typography folds in, so pasted snippets look right anywhere • Every rule keeps a comment naming which stylesheet it came from • Works on any framework — React, Vue, plain HTML, whatever the site is built with PRIVACY, ACTUALLY StyleGrab requests activeTab only — not "read and change all your data on all websites." It injects only into the tab you explicitly click it on, makes zero network requests during normal use, and collects nothing: no analytics, no accounts, no telemetry. The only third-party contact happens if you buy Pro: activating a license key calls Dodo Payments' license API to validate it — that's it. Free forever tier included. No account required for either tier.