Hover any element on any webpage and instantly extract its CSS — colors, fonts, spacing, box model, and accessibility.
Users
58
+11 in 30 days
Rating
5.0 / 5
unchanged in 30 days
Ratings
6
0 in 30 days
Store rank
#102K
#85K among extensions
Version
0.0.3
updated 8 Jun 2026
Users
monthly, 6 months
Latest, 16 Oct 2026:58 usersMove the mouse over the chart for any month
Ratings count
monthly, 6 months
Latest, 16 Oct 2026:6 ratingsMove the mouse over the chart for any month
The Chrome Web Store rounds user counts down to the leading digit, so the user line moves in steps. The ratings count is exact and is the better signal of real adoption.
About CSS Inspector for Chrome
CSS Inspector – Inspect Any Element. Copy CSS Instantly.
Hover over any element on any website and CSS Inspector highlights it with the exact selector and dimensions. Click it — and all CSS properties are extracted instantly into a clean side panel.
No more digging through Chrome DevTools. No more guessing styles. Just hover, click, and copy the code.
Like Figma's Dev Mode — but for any live website.
# HOW IT WORKS
- Open the CSS Inspector side panel in Chrome
- Hit "Inspect" to activate
- Hover any element — see selector and dimensions live
- Click it — full CSS extracted instantly, ready to copy
# WHAT YOU GET FOR EVERY ELEMENT
- Colors — Text, background, border with exact hex values
- Typography — Font family, size, weight, line-height, alignment
- Spacing — Padding, margin, width, height, box model
- Effects — Shadows, borders, opacity, transitions
- Accessibility — Contrast ratio with WCAG pass/fail result
- Code — Clean CSS ready to copy and paste
# WHO IS IT FOR
- Frontend developers who want to grab CSS from any live site fast
- UI/UX designers checking if a live page matches the Figma design
- QA engineers verifying spacing, contrast, and visual accuracy
- Freelancers and agencies inspecting client or competitor websites