CSS Inspector
Extension Actions
A design-first inspector for extracting styles, colors, and assets.
CSS Inspector is a premium, design-first tool built for web developers, designers, and UI/UX enthusiasts who want to deconstruct any website's styling with precision and ease.
Whether you're looking to replicate a beautiful layout, audit your site's topography, or extract a specific color palette, CSS Inspector provides a streamlined and visual-rich experience that turns complex CSS into actionable data.
🚀 Key Features
Visual Element Inspector: Simply toggle Inspect Mode and click any element to see its full CSS profile. No more digging through the standard browser DevTools for simple style checks.
Deep Element Specs: View detailed box model metrics (margin, padding, size), typography details, background properties, and border settings in a beautifully organized sidebar.
Instant Color Palettes: Automatically extracts the primary color palette of any webpage. View visual swatches and hex codes in a dedicated "All Colors" view.
Typography Audit: Instantly identify heading and body fonts used across the site.
Site Overview & Stats: Get a high-level summary of any website, including CSS rules count, stylesheet load times, and even accessibility contrast scores.
Clean & Lightweight UI: Designed to stay out of your way while providing all the information you need in a modern, premium interface.
🛠How to Use
Click the CSS Inspector icon in your toolbar.
Toggle Inspect Mode in the sidebar.
Hover over and click any element on the page to extract its styles.
Use the bottom tabs to switch between Overview, Colors, and Specs.