Live CSS & Layout Inspector

Stop opening DevTools just to check a font size or a hex code. Live CSS & Layout Inspector turns your cursor into a design tool. Move your mouse over any element on any webpage and instantly see a clean, readable panel with everything a designer or developer needs: 🎨 Colors — exact text and background colors as copy-ready hex codes, with live swatches 🔤 Typography — font family, size, weight and line-height 📐 Spacing — padding and margin values, visualized directly on the page with color-coded overlays 🧱 Layout structure — see at a glance whether an element uses Flexbox or Grid, its direction, and gap 🧭 Position & z-index — catch stacking-order and overlap issues without digging through the Elements panel How it works 1. Click the extension icon (or it's on by default) to activate the inspector on the current tab. 2. Hover over any element — headings, buttons, cards, images, anything. 3. A floating panel appears next to your cursor with all the CSS details. 4. Press Alt+L to lock the panel on the current element so you can move your mouse to read it. 5. Press Esc to pause the inspector at any time. Who it's for - Designers doing visual QA or competitive research - Front-end developers debugging spacing and stacking issues - Anyone who wants to "reverse engineer" a site's design system without opening DevTools Privacy first Live CSS & Layout Inspector runs entirely in your browser. It reads the styles of the page you're already viewing to display them to you — nothing is collected, stored, or sent anywhere. See our full privacy policy for details.