Div Inspector

Hover any element to see its CSS in a tooltip — computed styles, matched rules, :hover/:focus/… states and ::before/::after.

The easiest way to see any element's CSS. Just hover it — no right-click, no "Inspect", no DevTools panel every time. Div Inspector shows an element's styles in a tooltip the moment you point at it, including the ones DevTools makes you dig for. WHAT YOU SEE • Styles – size, spacing, layout, typography, colours, borders and effects, with the box model and colour swatches. • Pseudo – what changes on :hover, :focus, :checked, :disabled and more, plus ::before, ::after and other pseudo-elements. • Rules – every CSS rule that applies, in cascade order, with its source file. Overridden values are struck through. • HTML – the element's markup with its parent, siblings and children. Click a tag to jump to it. MADE FOR QUICK CHECKS • Click to pin the tooltip, then switch tabs, filter rules and copy CSS. • Arrow keys move to the parent, children and siblings. • Click a colour swatch to try a new colour live on the page. • Works with shadow DOM, iframes, Tailwind classes and modern CSS (@layer, @container, nesting). • Right-click any element → "Inspect with Div Inspector" to jump straight to it. • Rendered font shows the font the text actually uses, and which ones in font-family didn't load. WHO IT'S FOR Front-end developers, designers, QA testers, and product and marketing teams: anyone who needs to check a site's styles quickly. HOW TO USE Click the toolbar button or press Alt+Shift+H, then hover anything. Click to pin, Esc to unpin, Esc again to turn it off. PRIVACY Div Inspector collects no data and sends nothing anywhere. It only runs on a tab when you turn it on.