About CSS DNA
CSS DNA is a browser extension for inspecting CSS. Click any element on any website to copy its CSS, or scan the whole page to get its colors, fonts, type scale, spacing, shadows and gradients as a design system. It runs in Chrome, Edge, Brave and Arc, with a Firefox build. It isn’t related to cssDNA, the circular single-stranded DNA used in genetics research, or to the CSS double-helix animations on CodePen. The name means a website’s design DNA.
What it does
Most CSS inspectors show you one element at a time. CSS DNA reads the live computed styles of the whole page, so it can tell you which colors a site really uses and how often, which fonts set the body text and headings, and what spacing and radius steps the layout follows. Because it reads what the browser computed, it works on minified CSS, Tailwind utility classes and CSS-in-JS, where reading the stylesheet by hand gets you nowhere.
The free version copies element CSS, picks colors, ranks the page’s palette and shows the type and design-system overview. CSS DNA Pro, $5 a month after a 7-day free trial, exports what it finds to Tailwind (a v3 config or a v4 @theme block), CSS variables, SCSS, JSON design tokens and Figma, and writes a DESIGN.md brief for AI coding agents such as Claude Code and Cursor. Pro also adds component capture, a CSS health audit and contrast fixes.
How it handles your data
Everything you inspect or extract stays in your browser. There’s no account and no analytics. The only network request CSS DNA makes on its own behalf is the Pro licence check, which sends the email you paid with to our payment provider, Stripe. The privacy policy has the details.
Free tools on this site
- Font Finder: paste a URL to see every font a website uses, where it loads from and which weights ship.
- Color contrast checker: the WCAG 2 ratio and APCA Lc score for the same pair of colors.
- CSS framework detector: paste class names and see which framework produced them.
- Specificity calculator: type a selector and get its specificity triple.
How we write the guides
The blog covers CSS layout bugs, fonts, color and design tokens. Every browser-support claim is checked against MDN, Can I Use or the vendor’s own release notes before it’s published, and each post lists its sources inline. When a popular claim turns out to be wrong, such as native CSS mixins having shipped (they haven’t), or the design tokens format being a W3C Recommendation (it’s a Community Group Report), the post says so. When we compare CSS DNA with other tools, we say that we make it.
Who makes it
CSS DNA is made by the makers of PapaMarks, an IGCSE and A-Level revision platform.
Get it, or get help
Install from the Chrome Web Store, Edge Add-ons or Firefox Add-ons. For bugs and questions, use the Support tab on the Chrome Web Store listing.
Try it on the next site you open
Inspecting is free. Token exports are $5 a month after a 7-day trial. No account either way.
Add CSS DNA to Chrome (free)