The CSS DNA Blog
Practical, no-fluff guides on design tokens, CSS inspection, color, typography and accessibility — written by the team behind the CSS DNA Chrome extension.
Font Finder: What Fonts Does a Website Use?
Paste any URL and get every font family the site loads, where each comes from (Google Fonts, Adobe, self-hosted), the weights that ship, and which ones set body text and headings.
CSSCSS Anchor Positioning Not Working?
Nine silent failure modes, a live demo that breaks a real anchored tooltip, and the 2026 position-anchor default change that broke popover tooltips.
Tailwind v4 Dark Mode Not Working?
Why dark: ignores your .dark class in Tailwind v4, plus a generator that writes the exact CSS and <head> script for your setup.
CSS Masonry in 2026: Grid Lanes
Masonry is now display: grid-lanes. Who ships it (Safari 26.4, not Firefox), what to ship meanwhile, and a demo that switches between native, JS and columns.
CSS corner-shape: Squircles and Scoops
What each superellipse() value draws, who supports it, and a live playground that writes the clip-path fallback for you.
CLAUDE.md vs AGENTS.md
Claude Code now reads AGENTS.md, but only as a fallback. Which instruction file each coding agent loads, in what order, and a precedence explainer.
AI-assisted developmentClaude Code Skills for Frontend
Every SKILL.md frontmatter field from Anthropic’s docs, a design-system skill that makes Claude use your tokens, and a live SKILL.md validator.
TypographyHow to Download Fonts From a Website
Finding the woff2 takes a minute. Why the file is usually a subset or variable font, why it doesn’t come with a licence, and a paste-in @font-face parser.
WhatFont Alternatives Compared
WhatFont hasn’t shipped an update since March 2024. Five font identifiers compared, plus a tester that shows which font in a stack your browser really uses.
Free toolHow to Center a Div in CSS
Seven methods, which axis each one handles, and the one-property version that needs no flexbox, no grid and no wrapper. Pick a method and watch it render.
Free toolFlexbox vs Grid
The rule you were taught — grid for pages, flexbox for components — misroutes half the cases. The real test, plus what flex: 1 actually resolves to.
Why position: sticky Isn’t Working
Four times out of five an ancestor’s overflow is the culprit, and the fix is one word. Toggle each cause on a live demo and watch sticky break.
Why z-index Isn’t Working
Why 9999 loses to 1, everything that traps an element in a stacking context, and the entry MDN still lists that browsers dropped.
What CSS Framework Is This Site Using?
Class names are a fingerprint no site can hide. The signature table for fifteen frameworks, the Tailwind v3-vs-v4 tell most people miss, and a paste-in detector.
CSSModern CSS in 2026: What Actually Shipped
Four tiers, with the support column the listicles leave out — and the correction they all need: native CSS mixins have not shipped in any browser. Includes a live check of your own browser.
Free toolThe CSS Specificity Graph
One chart tells you whether a stylesheet is safe to change. How to read the spikes, plot your own from any live page, and the four fixes that flatten it.
Free toolColor Contrast Checker: WCAG 2 and APCA, Side by Side
Most checkers report one number. This reports both models for the same pair, says which to trust when they disagree, and hands you the nearest shade that passes.
ToolsCSS Scan Alternatives: 6 Options, 4 of Them Free
$120 list, $69 discounted, for one job done very well. What that job is worth, where the free options land, and the one thing CSS Scan still beats everything at.
ColorColorZilla Alternatives: 6 Color Pickers Compared
Start by not installing anything — Chrome ships an eyedropper now. Then the harder question: why every pixel-sampling picker returns colors that appear in no stylesheet.
AI-assisted developmentWhy Every AI-Generated UI Looks the Same
Indigo gradient, Inter, three rounded cards. An unconstrained model returns the median of its training data — and the fix isn't a better adjective, it's giving it your actual values.
Design tokensThe Design Tokens JSON Format (tokens.json), Explained
The DTCG spec hit its first stable version in October 2025. What $value and $type do, why colors became objects, how aliases work — and why calling it a W3C standard is wrong.
CSSHow to Get Any Website's CSS Variables
The DevTools :root panel, two console snippets, and the stylesheet walk that survives CORS and finds the scoped theme blocks the others miss.
ToolsCSS Peeper Alternatives: 6 Options Compared
Why people leave — one element at a time, no real export, no states — and what actually replaces it. Free and paid, with an open note about who wrote this.
Design processHow to Rebuild Any Website's Design (Without Cloning It)
It is almost never the color — it is the rhythm. A six-step workflow: capture the system, read the ratios, convert colors into roles, rebuild one component, then diff yours against theirs.
ToolsThe Best CSS Inspector Extensions for Chrome, Honestly Compared
CSS DNA, CSS Scan, CSS Peeper, VisBug and DevTools on five criteria — with verified pricing, and a plain note about where each one beats ours.
AccessibilityHow to Check Color Contrast on Any Website
The ratios you actually need, four ways to measure them live, and the three failures Lighthouse never reports — text on images, non-default states, and placeholder gray.
AI-assisted developmentDESIGN.md: How to Give Cursor and Claude Code a Real Design System
Agents don't have taste, they have defaults — and the default is Tailwind's stock palette. The five parts of a DESIGN.md that fix that, a complete example, and where each agent looks for it.
ColorHex to OKLCH: Why Tailwind v4 Switched and How to Convert Any Palette
HSL lies about lightness. What the three OKLCH numbers mean, why v4 defines every color in it, and how to build a 50–950 ramp that doesn't go neon at the ends.
CSSHow to Copy CSS From Any Website
Five methods compared — and the three things that silently break a copy-paste: unresolved custom properties, inherited values, and missing layout context.
ColorHow to Get Any Website's Color Palette
Screenshot extractors sample pixels, so they return photo colors and antialiasing blends. Read computed styles instead — then delete the near-duplicates.
Design tokensHow to Extract Design Tokens from Any Website
A step-by-step guide to pulling colors, fonts, spacing, shadows and gradients out of any live site — and exporting them as Tailwind, CSS variables, JSON, SCSS or Figma tokens.
Tailwind CSSHow to Convert Any Website to Tailwind CSS
Tokens first, markup second: turn any site’s colors, fonts and radii into a Tailwind v4 @theme block or v3 config, with a free paste-in converter.
APCA Contrast vs WCAG 2: The Complete Guide
WCAG 2's fixed ratios and APCA's perceptual model disagree more often than you'd think. Here's how each works, when they conflict, and which one to trust.
TypographyWhat Font Is That Website Using? 5 Ways to Find Out
DevTools rendered fonts, a one-line console snippet, hover extensions, image lookup for type baked into a JPEG — and the whole type scale in one click.
Extract any website's design DNA
Free to inspect. No account, no tracking — runs 100% in your browser.
Add CSS DNA to Chrome — Free