Media
4 items
Description
Inspect CSS on any site: colors, fonts, contrast, box model. Tweak it live and copy the CSS. Built for developers and designers. Ever tried to check the exact CSS behind a button, a gradient, or a font on someone else's site, and ended up lost in the Dev Tools panel? WhatTheCSS shows you the CSS of any element instantly on any site. Point at any element on any website and see the CSS that's actually applied: colors, fonts, spacing, the box model, plus a live WCAG contrast check. Pin it to edit values live on the page, or copy the CSS in one click. No expanding, scrolling, and hunting through a hundred computed properties. And it reads modern CSS the way the browser does: it resolves your CSS variables to real values and handles @layer, nesting, and shadow DOM, so what you copy actually works when you paste it. PEEK Mode (FREE) There's also a peek mode that shows a stripped-down, at-a-glance view for designers who just want the key details like fonts, colors, and check contrast. Features included in the FREE version: • Hover to inspect any element's CSS on any site. • Colors with a live contrast score (AA / AAA), typography, spacing, and the full box model. • Walk the ancestor tree to jump between parent and child elements. • Edit values live, on the page, and watch the change happen. • Copy an element's CSS to your clipboard, ready to paste. • Fast and keyboard-driven: toggle with Alt+Shift+W, pin with Space. PRO (one-time upgrade, no subscription) • Export a whole component, not just one element, as ready-to-use CSS: open it in CodePen, copy an HTML snippet, or get Tailwind markup. • Save components to a personal library and reopen them anytime. • Design-system audits: palette, font, and design-token reports for the whole page. WHO IT'S FOR • Developers reverse-engineering a layout, debugging their own CSS, or lifting a pattern they like. • Designers checking spacing, type, and contrast without pinging an engineer. • Anyone curious about how a site is built. PRIVACY No analytics, no telemetry, no tracking. WhatTheCSS reads a page's CSS on your device to show it to you; nothing about your browsing is collected. The only data that leaves your browser is your license key (to activate Pro) and, only when you choose "Export to CodePen," the single component you selected. Full policy: https://whatthecss.dev/privacy Free for looking. Pro for extracting. Built for developers and designers.