Everything you open DevTools for, in one hover.
Built for front-end developers, designers and anyone who builds websites and wants to learn from great ones.
Authored CSS, not noise
Reads the site's real stylesheet rules, including :hover states and pseudo-elements, instead of 300 lines of computed values.
Copy in one key
Click to pin, press C. Paste clean, ready-to-use CSS with CSS variables already resolved.
Measure like Figma
Pin an element, hold Alt and hover another to see the exact pixel gap. Every element also gets a full box model.
Color picker, any format
Pick any pixel on screen and copy it as HEX, RGB, HSL or OKLCH. Copy CSS in px or rem.
Element screenshots PRO
Save any element as a crisp PNG, cropped exactly to its edges, and copy it to your clipboard.
Contrast built in
See the WCAG contrast ratio of any text against its real background. Free, not a paid add-on.
Tailwind classes PRO
Convert any element to Tailwind utility classes, mapped to the default scale where it fits.
HTML + CSS export PRO
Grab a whole component with its children and send it straight to CodePen.
Works where others stop
Inspects inside web components (Shadow DOM) and same-origin iframes, with their real stylesheet rules. Private cross-site frames are explained, not silently skipped.
Keyboard first
↑ parent, ↓ child, Space to pause, C to copy, P to pick a color, Alt to measure, Esc to exit. Start it with Alt + Shift + C.
Live CSS editing PRO
Tweak any property right on the page, see the result instantly, then copy your edited CSS or reset.
Design spec for AI PRO
Copy a site's colors, type scale, radii, shadows and key components as Markdown that Claude, Cursor or ChatGPT can follow.
Tokens & assets PRO
Export the palette and fonts as CSS variables and JSON design tokens, and download a page's images and SVG icons.
Speaks 9 languages
English, Chinese (Simplified and Traditional), Japanese, Korean, Spanish, Portuguese, German and French. It follows your browser automatically. See it
Remembers your setup
Color format, px or rem, and where you put the panel are saved, so it opens exactly how you left it.
From a live site to Tailwind in one click.
Spacing, colors, radius and shadows map to Tailwind's scale when they match, and to exact arbitrary values when they don't.
Hold Alt. Measure anything.
Pixel-exact distances between any two elements on a live website, with margin, border and padding laid out for you.
Every color and font on the page.
See a site's palette ranked by use and its type scale at a glance. Click any swatch to copy it.
Speaks your language.
The whole interface follows your browser language, from the panel to the settings page. No switch to find, nothing to configure.
Respectful by design.
Many inspector extensions have drifted into subscriptions, popups and data collection. Stylegrab won't.
| Stylegrab | What users report elsewhere | |
|---|---|---|
| Runs only when you click it | Yes — activeTab only | Some ask to read all sites at install |
| Injects popups into websites | Never | Donation popups, even on checkout pages |
| Sends your data anywhere | No — only a license check | IP addresses sent to third parties |
| Useful without paying | Inspect, copy, contrast, palette | Core features behind a paywall |
| Pricing | One-time, 14-day refund | Often subscriptions, some with no refunds |
Simple pricing.
The free plan is genuinely useful. Pro is a one-time purchase — no subscription.
Free
- Hover inspect, box model & measuring
- Copy authored CSS in px or rem
- Color picker & contrast checker
- Page colors & fonts
- Shadow DOM & iframes, 9 languages
- Try every Pro action 3× a day
Pro · launch price
- Everything in Free
- Tailwind classes
- HTML + CSS export & CodePen
- Live CSS editing
- Design spec for AI, design tokens & assets
- Element screenshots
- 3 browsers · all 1.x updates · 14-day refund
FAQ
How is this different from Chrome DevTools?
DevTools shows everything; Stylegrab shows what you need. Hover to see the rules that matter, then copy them, convert them to Tailwind or export the whole component.
Why can't it read some styles?
Browsers block reading stylesheets served from other domains without CORS. On those sites Stylegrab falls back to clean computed values, so copying still works.
What data do you collect?
None. Page content never leaves your browser. The only request Stylegrab makes is to check your Pro license key. See the privacy policy.
Can I get a refund?
Yes. If Pro isn't right for you, email us within 14 days of purchase for a full refund.
Does it work with web components and iframes?
Yes. Stylegrab looks inside open Shadow DOM and same-origin iframes, including their stylesheet rules. Browsers keep frames from other websites private; for those it tells you so and offers to open the frame in its own tab.
Which languages does it speak?
The interface follows your browser language: English, 简体中文, 繁體中文, 日本語, 한국어, Español, Português, Deutsch and Français.
Does it work in Edge, Brave or Arc?
Yes — any Chromium browser that installs extensions from the Chrome Web Store.