CSS DNA — Inspect CSS & Extract Design Tokens icon

CSS DNA — Inspect CSS & Extract Design Tokens

by rorobaker1995 · Developer Tools
Manifest V3 in_app
View in Chrome Web Store Data as of 16 Oct 2026

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
050101Jun 2026Sep 2026Oct 2026
Latest, 16 Oct 2026: 101 usersMove the mouse over the chart for any month

Ratings count

monthly, 4 months
0510Jun 2026Sep 2026Oct 2026
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.

Growth

WindowUsersChangeRatingsRating
7 days+6+6.3%00.00
30 days+29+40.3%00.00

Version history

3 versions recorded
4.7.04 Oct 2026
4.6.38 Jul 2026
4.6.224 Jun 2026

Details

Category
Developer Tools
First seen
24 Jun 2026
Size
47 KB
Languages
en
Pricing
in_app
Privacy policy
cssdna.com
Support
cssdna.com
Extension ID
lonfnaloekjpfgkjbjlaiephjaamikkd

Permissions and risk

Minimal riskimpact 0, likelihood 3
Permissions
activeTabscriptingstoragealarms

Alternatives to CSS DNA — Inspect CSS & Extract Design Tokens

Extensions that rank for the same store searches or share the Developer Tools category, ordered by users