CSS DNA

CSS DNA is a browser extension for extracting design tokens and inspecting CSS from websites without opening DevTools. It is aimed at front-end developers and design engineers and is built to work in the browser, with no account or sign-up required.

It can inspect a single element or scan an entire page for its design system. Supported actions include clicking an element to copy clean CSS, exporting extracted styles to Tailwind, CSS, JSON, or Figma, and copying elements as HTML + CSS, Tailwind classes, JSX, or a component. The tool also reads live rendered styles, including styles from frameworks and minified CSS, and it can pull colors, fonts, shadows, gradients, and border-radii from a page. Additional functions shown on the site include an eyedropper for sampling a pixel’s hex value, deduplicated color palettes ranked by usage, detection of font families, weights, and type scale, comparison of two sites, a CSS health audit, WCAG and APCA contrast checks, OKLCH tonal scale generation, and an AI / DESIGN.md export.

The page also describes export formats and use cases. CSS DNA can export to Tailwind v3 and v4, CSS variables, JSON, SCSS, Figma tokens, W3C tokens, and downloadable files. Its use cases include converting a website to Tailwind CSS, extracting a color palette, finding the fonts a website uses, and inspecting CSS without opening DevTools. The product is available in Chrome, Edge, Brave, and Arc, and the instructions say it lives in the browser toolbar after being pinned from the Chrome menu.

Pricing shown on the page is free to inspect and $5 per month for Pro export. The page lists a free tier for inspection and a Pro tier for export and advanced functions. No license is stated.