# 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. Canonical page: [https://chrome-stats.com/d/css-dna](https://chrome-stats.com/d/css-dna) ## Overview - **ID:** `css-dna` - **Platform:** Firefox - **Type:** Firefox add-on - **Status:** Available - **Publisher:** CSS DNA - **Category:** web-development - **Daily users:** 2 - **Weekly downloads:** 1 - **Version:** 4.6.2 - **Last updated:** 2026-06-26 - **First published:** 2026-06-23 - **Size:** 50 KB - **Data as of:** 2026-09-10 - **Store listing:** [Firefox Add-ons Store](https://addons.mozilla.org/firefox/addon/css-dna/) - **Website:** [https://cssdna.com](https://cssdna.com/) - **Privacy policy:** [https://addons.mozilla.org/firefox/addon/css-dna/privacy/](https://addons.mozilla.org/firefox/addon/css-dna/privacy/) ## Description 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. Export in one click to the format you 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 • 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), audits & downloads. 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). ## Rankings - #65,858 — Overall - #56 — eyedropper - #133 — figma - #188 — extract - #189 — design ## Permissions and access ### Permissions - `activeTab` - `scripting` - `storage` - `alarms` ## Safety - **Risk impact:** Very low risk impact - **Risk likelihood:** High risk likelihood ### Analysis details - This extension has low user count. Unpopular extensions may not be stable or safe. > Some risk analysis details are omitted from this free response. [Upgrade to view the full analysis](https://chrome-stats.com/pricing). ## Similar extensions and apps - [HTML & CSS Extractor - CSS Picker](https://chrome-stats.com/d/html-css-extractor-css-picker) — 65 users - [Design Token Extractor](https://chrome-stats.com/d/design-token-extractor) — 1 users - [Woblo](https://chrome-stats.com/d/woblo) — 64 users - [TailScan](https://chrome-stats.com/d/tailscan) — 1 users - [DesignDNA](https://chrome-stats.com/d/designdna) - [CSS to Tailwind — Instant Conversion](https://chrome-stats.com/d/css-to-tailwind-instant-conver) - [Design Token Inspector](https://chrome-stats.com/d/design-token-inspector) — 3 users - [MiroMiro](https://chrome-stats.com/d/miromiro) — 16 users - [Design System & Theme Extractor by Visily](https://chrome-stats.com/d/design-system-extractor-visily) — 2 users - [HTML/CSS Extractor](https://chrome-stats.com/d/html-css-extractor) — 138 users, 3.00 / 5 - [Peek - Design & Asset Toolkit](https://chrome-stats.com/d/peek-design-asset-toolkit) — 18 users - [DesignDrop — Design System Extractor for AI](https://chrome-stats.com/d/designdrop-design-system-extra) — 3 users --- Source: [Chrome-Stats](https://chrome-stats.com/d/css-dna)