CSS DNA — Inspect CSS & Extract Design Tokens

Inspect any element's CSS and extract a site's colors, fonts & design tokens — export to Tailwind, CSS, JSON, Figma & more.

CSS DNA is the fastest way to inspect CSS and steal a website's design system — the right way. Stop digging through DevTools. Click any element to instantly copy clean, minimal CSS. Then scan the whole page to pull its entire design language: every color, font, type size, shadow, gradient, and border-radius — ranked by how often it's used. Then export it in one click to the format you actually work in: • Tailwind config — drop a site's palette + fonts straight into tailwind.config.js • CSS variables — a ready-to-paste :root { --color-… } block • JSON design tokens — for design systems and Style Dictionary • SCSS variables & Figma tokens ✨ Features • Click-to-copy CSS for any element (minimal or full) — walk the DOM with arrow keys • Eyedropper + WCAG 2 AND APCA (WCAG 3) contrast checking • One-click design-system extraction: colors, fonts, type scale, spacing, radii, shadows, gradients, CSS variables, breakpoints, @font-face, motion • AI / DESIGN.md export — the whole design system as an agent-ready brief for Claude, Cursor & Copilot • OKLCH tonal scales, near-duplicate color detection, contrast grid & palette PNG export • CSS health audit — 0–100 score for specificity, !important, duplicates, orphaned variables & consistency • CSS stats & specificity graph; pseudo-state capture (:hover/:focus/::before…) • Copy any element as Tailwind classes or a JSX style object — and the full component • Accessibility audit + SEO checker — scored checklists with copyable reports • Beautiful, isolated overlay that never clashes with the page • 100% local — no account needed, no data leaves your browser Free forever: element CSS copy, eyedropper, and full design-system preview. Pro (subscription): token exports (Tailwind / CSS vars / JSON / SCSS / Figma) + downloads, audits & more. Perfect for front-end developers, design engineers, and designers who want to learn from, rebuild, or audit any website's styling in seconds. — No tracking. No ads. No analytics. Minimal permissions (only the tab you're on).