CSS Variable Finder - Custom Property Inspector

Find all CSS variables on any page. Shows variable names, values, and color swatches. One-click copy for devs.

CSS Variable Finder instantly discovers every CSS custom property on any webpage and displays them with color swatches, variable names, and computed values. Unlike tools that only show used colors, this extension shows the actual variable names developers need for their code. Features: Scans all stylesheets including root, body, and imported CSS for custom properties Color swatch preview for every color variable Visual color palette grid showing all CSS colors at a glance Auto-categorizes variables into Colors, Sizes, Fonts, and Other Real-time search to find variables by name or value Filter tabs to show only colors, sizes, fonts, or other variable types One-click copy — click any variable to copy var(--name) to clipboard Hover tooltips on palette showing variable name and value Source tracking showing which stylesheet defines each variable Handles modern color formats including hex, rgb, hsl, oklch, and named colors Detects variables inside media queries and supports rules Smart categorization using both variable names and values Built for front-end developers inspecting design systems, web designers extracting brand colors from live sites, developers working with Tailwind CSS or Bootstrap 5 custom properties, and anyone who needs to find the right CSS variable name without digging through DevTools. No data is collected. No API calls. Everything runs locally in your browser. Built by Egochi — Professional web design and development company.