CSS Glance: inspect colors, fonts & CSS

Hover any element to see its size, colors, fonts and contrast. Copy clean CSS in one click. Nothing leaves your browser.

CSS Glance shows you the size, colors, fonts and CSS of anything on a web page. Click the icon, hover an element, and the essentials appear in a tidy panel. No DevTools digging. FREE • Size and spacing: width × height, margin, padding and border radius • Fonts: family, size, line height and weight • Colors: text and background as hex codes. Click a color to copy it • Contrast check: the contrast ratio between text and its real background (semi-transparent layers included), with a WCAG AA / AAA result • Pin an element: click to keep it selected. Links and buttons on the page will not fire while you inspect • Press Esc or click the icon again to stop PRO (one-time purchase, no subscription) • Copy CSS: copy an element's styles as a clean rule. Only the properties that differ from the browser defaults, with margin, padding, border and border-radius collapsed into shorthands • Page colors and fonts: every color, font family and font size used on the page, most used first • Measure gaps: pin one element, hover another, and read the horizontal and vertical gap between them Pro is sold on the official website. PRIVATE BY DESIGN • Nothing is sent anywhere. The extension has no network access and no analytics • It only reads the page when you click its icon • No account needed GOOD TO KNOW • The font shown is the first family in the element's font stack; the browser may fall back to a later one if that font is not installed • Content inside iframes from other sites cannot be inspected • Extensions cannot run on browser settings pages or on the Chrome Web Store Website: https://css-glance.vercel.app Contact: https://css-glance.vercel.app/contact.html