Design Inspector

Hover over elements to inspect CSS properties. Click to copy to clipboard.

🚀 WHAT'S NEW IN VERSION 1.1 (The Power User Update) • Auto-CSS Generator: Click any element to instantly copy a perfectly formatted CSS class block directly to your clipboard. • Page Palette Extractor: A new button in the popup menu instantly scans the page and generates clickable swatches of every color used on the site. • Accessibility Contrast Checker: Instantly see if text passes or fails WCAG readability contrast ratios. • UI Polish: Upgraded to a sleek, frosted-glass (glassmorphism) tooltip that smartly dodges screen edges. • Freeze Tool: Press 'F' while hovering to freeze the tooltip in place. ----------------------- Instantly inspect and view computed CSS properties (fonts, colors, margins) by simply hovering over any element on a webpage. Ever wonder exactly what font a website is using, or what the specific hex color of a button is? Design Inspector is a lightweight, developer-friendly tool that lets you view the core CSS properties of any web element instantly. Instead of digging through complex browser DevTools, simply click the extension icon to enable the inspector, and hover your mouse over any text, image, or container on the page. A clean, unobtrusive tooltip will appear, displaying exactly how the element is styled. Features: One-Click Toggle: Easily turn the inspector on or off from your extension toolbar. Instant Visual Feedback: A highlight box clearly borders the element you are currently inspecting. Core CSS at a Glance: Instantly view Font Family, Font Size, Text Color, Margins, and Padding. Zero Bloat: Designed to be incredibly fast and run locally without slowing down your browsing experience. Who is this for? Web Developers & Designers: Quickly audit your own work or gather inspiration from other websites. QA Testers: Verify that implemented designs match the original mockups. Students: Learn how your favorite websites are built and styled.