CSS Style Inspector – by Pixellize

CSS Style Inspector is a lightweight developer and designer tool that lets you instantly inspect the visual styles of any element on any webpage — without opening DevTools. Click the extension icon to activate the inspector. Hover over any element to see its margin and padding zones highlighted directly on the page — orange for margin, green for padding — so you can immediately understand the spacing around each element at a glance. Click any element to lock it in and open the floating style panel. The panel shows a complete breakdown of the element's spacing (box model with margin and padding values), typography (font family, size, weight, line height, color and more), colors (all detected colors including text, background and shadow swatches), and element properties (rendered width, height, display and position). Every value in the panel is clickable to copy it instantly. Once an element is selected, hover over any other element on the page to measure the distance between them. Live measurement lines appear with pixel values showing the exact gap — top, bottom, left and right — so you can verify spacing and alignment without guessing. The style panel is fully draggable. Position it anywhere on the screen that works best for your workflow. Press ESC or click the close button to exit the inspector at any time. CSS Style Inspector works on all websites including React, Angular, Vue and other JavaScript-heavy single-page applications. It handles pages with overflow hidden, CSS transforms, and dynamic content without breaking the page layout. Built by Pixellize for developers and designers who want fast, distraction-free style inspection without switching context.