Copy any element's CSS and get a site's colors, fonts and design tokens. Free CSS inspector and color picker. Pro adds exports.
Users
101
+29 in 30 days
Rating
5.0 / 5
unchanged in 30 days
Ratings
10
0 in 30 days
Store rank
#84K
#70K among extensions
Version
4.7.0
updated 4 Oct 2026
Users
monthly, 4 months
Latest, 16 Oct 2026:101 usersMove the mouse over the chart for any month
Ratings count
monthly, 4 months
Latest, 16 Oct 2026:10 ratingsMove the mouse over the chart for any month
The Chrome Web Store rounds user counts down to the leading digit, so the user line moves in steps. The ratings count is exact and is the better signal of real adoption.
About CSS DNA — Inspect CSS & Extract Design Tokens
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 copy clean, minimal CSS — then scan the whole page and export its entire design system.
Every color, font, type size, spacing value, shadow, gradient and border-radius — ranked by how often the page actually uses it.
EXPORT IN ONE CLICK
• Tailwind — a v3 config or a v4 @theme block
• CSS variables — a ready-to-paste :root { --color-… } block
• JSON design tokens — for design systems and Style Dictionary
• SCSS variables, plus Figma / W3C design tokens
• DESIGN.md — an agent-ready brief for Claude, Cursor, Copilot and Windsurf
FEATURES
• Click-to-copy CSS for any element, minimal or full — walk the DOM with arrow keys
• Eyedropper with live WCAG 2 ratios and APCA (WCAG 3 draft) contrast scores
• One-click extraction: colors, fonts, type scale, spacing, radii, shadows, gradients, CSS variables, breakpoints, @font-face and motion
• OKLCH tonal scales (50–950), near-duplicate color detection, contrast grid and palette PNG export
• CSS health audit — a 0–100 score for specificity, !important, duplicate selectors, orphaned variables and consistency
• CSS stats and a specificity graph, plus pseudo-state capture (:hover, :focus, ::before)
• Copy any element as Tailwind classes or a JSX style object — or capture the whole component
• Accessibility and SEO checklists with copyable reports
• An isolated overlay that never inherits or clashes with the page's own styles
FREE FOREVER
Element CSS copy, eyedropper, ranked color palette, and the full design-system preview.
PRO — $5/month, cancel anytime
Token exports and downloads, component capture, the health audit, contrast auto-fix, and side-by-side comparison of two sites. Unlocks by verifying the email you paid with — no account.
For front-end developers, design engineers and designers who want to learn from, rebuild or audit any website's styling in seconds.
100% local. No tracking, no ads, no analytics, no backend — nothing leaves your browser. Minimal permissions: only the tab you're on.
Works in Chrome, Edge, Brave and Arc. A Firefox build is available separately.