Click any element to copy clean CSS. Scan any page to pull its colors, fonts, shadows and gradients — then export to Tailwind, CSS, JSON or Figma.
Pin CSS DNA, open any site, and pick a mode from the toolbar — inspect a single element or pull the whole page's design system.
Add CSS DNA from the Chrome menu. It lives in your toolbar — no account, no sign-up, nothing to configure.
Click the icon on any page. CSS DNA reads the live, rendered styles — even from frameworks and minified CSS.
Copy one element's CSS in a click, or scan the whole page and export its design system to your stack.
Built for front-end developers and design engineers who copy fast and ship faster.
Minimal or full computed styles for any element — copied clean in one click.
Grab the exact hex of any pixel on the page — even inside images.
Every color on the page, deduped and ranked by usage, with one-click copy-all.
Detect font families, weights and the full size scale used across the page.
Pull box-shadows, gradients and border-radii automatically — pixel-accurate.
Copy any element as HTML + CSS, Tailwind classes or a ready-to-paste JSX component.
Diff two pages' palettes, fonts and type scales side by side.
Score specificity, !important usage, duplicates and variables — with copyable findings.
Check contrast both ways, plus a full palette-vs-palette contrast grid.
Generate 50–950 ramps from any color and catch near-duplicate shades automatically.
Copy the whole design system as an agent-ready brief for Claude, Cursor & Copilot.
Tailwind, CSS variables, JSON, SCSS or Figma tokens — drop straight into your repo.
Scan any page and every color comes back ranked by how often it's used, alongside the exact font families, weights and size scale. Convert colors to HEX, RGB, HSL or OKLCH, build 50–950 tonal ramps, and catch near-duplicates before they drift into your system.
Before you copy a pattern, see how healthy the CSS really is. CSS DNA scores specificity, !important abuse, duplicate rules and variable coverage — then hands you a copyable report to drop straight into your PR.
One click turns any site's design language into the format you actually work in. No retyping hex codes, no eyeballing spacing — just paste and ship.
Real workflows front-end and design engineers run every day — no DevTools, no account.
Scan any page and CSS DNA maps its colors, spacing, radii and type scale onto Tailwind utilities. Export a ready-to-paste tailwind.config for v3 or a Tailwind v4 @theme block — so converting a reference site to Tailwind takes seconds, not an afternoon of eyeballing hex codes.
Pull every color on the page, deduped and ranked by how often it's used. Copy the whole palette at once, convert any swatch to HEX, RGB, HSL or OKLCH, and generate 50–950 tonal scales. A real color palette extractor — not a single eyedropper sample.
Open CSS DNA on any site to see its exact font families, weights and the full type-size scale, read from the live rendered styles. No view-source spelunking and no guessing — just the fonts a website actually uses, ready to copy or export.
Click any element to copy clean, minimal or full computed CSS — including shadows, gradients and border-radii. CSS DNA reads styles even from minified stylesheets and framework class names, so you can inspect CSS on any website without ever opening DevTools.
Most inspectors stop at colors and fonts. CSS DNA goes further — the depth modern design systems actually need.
Generate perceptually even OKLCH tonal ramps from any extracted color, the same 50–950 structure Tailwind and modern design systems use. CSS DNA also flags near-duplicate shades — colors that look identical but differ by a hair — so they never drift into your tokens. Convert freely between HEX, RGB, HSL and OKLCH on every swatch.
Audit every text/background pair against both WCAG 2 ratios and APCA — the perceptual contrast model in the WCAG 3 draft that accounts for text size, weight and polarity. View a full palette-vs-palette contrast grid to catch failing combinations before they ship, and export the findings into your PR.
Start free and stay free for inspecting. Upgrade only when you want token exports.
No account required · Cancel anytime · Pro unlocks with a license key
No. CSS DNA runs 100% in your browser. Anything you inspect or extract stays on your machine — there's no server, no account, and no analytics. Nothing leaves the page.
Only access to the active tab when you open it, so it can read the page's rendered styles. It never runs in the background and requests nothing else.
Inspecting elements, the eyedropper, the ranked color palette and the full design-system preview are free forever. Pro ($5/mo) unlocks token exports — Tailwind, CSS, JSON, SCSS and Figma — plus the AI / DESIGN.md brief, component capture, the CSS health audit and site comparison.
Any Chromium browser — Chrome, Edge, Brave and Arc. A Firefox build is on the way.
No. Install and go. Pro unlocks with a license key — still no sign-up, no email wall.
Add CSS DNA to Chrome, open any website and click Extract. It scans the rendered page and returns colors, fonts, type scale, spacing, shadows and gradients as design tokens, then exports them to Tailwind, CSS, SCSS, JSON or Figma in one click. Read the full guide →
Yes. CSS DNA exports the extracted design system as Figma and W3C design tokens, so colors, type and spacing drop straight into your Figma variables. You can also export the same tokens to Tailwind, CSS variables, SCSS or JSON for your codebase.
Yes. CSS DNA never needs DevTools. Click the toolbar icon, then click any element to copy its CSS or scan the whole page to extract tokens. It reads live computed styles, so it works even on minified CSS and framework-generated class names.
WCAG 2 uses a fixed contrast ratio (like 4.5:1) for AA and AAA. APCA, the WCAG 3 draft model, weights contrast by text size, weight and polarity for more accurate readability. CSS DNA reports both so you can audit against current and upcoming standards. WCAG vs APCA, explained →
Inspect CSS and export design tokens from any website in seconds. Free to start — no account, no tracking.
Add to Chrome — Free