CSSpy

Hello developers and designers! Tired of digging through stylesheets or clicking your way through the developer tools just to check one element's CSS? CSSpy puts the answer right next to your cursor. Hover over any element on a page and CSSpy shows its computed styles — fonts, colors, box model, positioning and effects — in a compact tooltip. Click the element and its shortest unique CSS selector goes straight to your clipboard. WHAT CSSPY SHOWS YOU • Font & Text: font-family, font-size (in px and rem), font-weight, line-height, letter-spacing, font-style, text-transform • Colors & Background: color and background-color with a color preview, background-image • Box Model: a diagram showing margin, border, padding and the element's size at a glance, plus box-sizing, border and border-radius • Positioning: display, position, z-index, overflow • Effects: transform, transition, box-shadow, outline, opacity Font sizes are shown in px and rem side by side, converted against the page's actual root font size — not a hard-coded 16px. So the number you read is the number you can paste into your own stylesheet. COPY WHAT YOU FIND • Click any element to copy its shortest unique CSS selector. CSSpy walks up the DOM only as far as it needs to, so you get "div.card" or "div.grid > div:nth-of-type(2)" instead of a long, brittle path. • Page Palette: collect every color used on a page — with its role (text, background, border) and how often it appears — along with every font size and font family. Click a single value to copy it, or export the whole set as CSS custom properties with one click. HOW IT WORKS Click Start in the popup and begin inspecting. Press ESC to stop. That's it. PRIVACY AND PERMISSIONS CSSpy runs entirely in your browser. It collects nothing, stores nothing, sends nothing to any server and loads no code from anywhere. It also does not ask for access to all websites. The inspector is loaded only into the tab you start it on, and only for that session. On every other page, none of CSSpy's code runs at all. IDEAL FOR Web developers debugging or reading unfamiliar styles • designers checking whether a design was implemented as intended • frontend beginners learning how HTML and CSS work together • anyone who regularly needs a fast look at the CSS behind a page. WHAT'S NEW IN 2.0.0 • Box model diagram with margin, border, padding and content size • Click an element to copy its shortest unique CSS selector • Page Palette: all colors with role and frequency, all font sizes and font families, exportable as CSS custom properties • Font sizes now shown in both px and rem • Added line-height, letter-spacing, border-radius and box-shadow to the tooltip • No longer requires access to all websites — CSSpy is injected only into the tab you start it on • Faster, and no more flicker when moving between elements • Fixed misplaced highlights on pages that position their own body element Install CSSpy and see how quick CSS inspection can be. We welcome your feedback and suggestions! Contact: info@newcreation.de