Element Inspector on Hover

Hover any element to inspect box model, fonts, colors, WCAG contrast, grid/flex overlays, design tokens and more.

Element Inspector on Hover is a lightweight visual inspector for designers, developers and QA. Point at any element on a webpage and instantly see its tag, box model, font and colors in a small overlay — no DevTools required. What you see on hover • HTML tag, id and class • Size (width × height) • Padding, margin and border (each side) • Font family, size, weight and line-height • Text color and background color (with swatches) • Display, position and z-index How it works Click the toolbar icon and press Activate. Move your cursor across the page — a dashed outline highlights the element under it, and a panel follows your cursor with the details. Press Esc on the page, or open the popup and click Deactivate, to turn it off. The on/off state is remembered across page navigations and browser restarts, so you can flip it on once and keep working. Who it's for • Designers checking spacing, type and color on live sites • Front-end developers debugging layout without opening DevTools • QA testers documenting visual issues quickly • Anyone curious how a website is built