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.
How 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
Turn a reference site's design language into a ready-to-paste Tailwind v3 config or v4 @theme block — without eyeballing hex codes or retyping spacing values.
AccessibilityAPCA 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