A Chrome extension for designers and front-end developers. Instant tooltip with the actual authored CSS, not the 300-line longhand mess your DevTools shows. Pin to live-edit. Click to copy. Free for the day-to-day.
No onboarding flow, no signup, no settings to configure. You install it, click the icon, and start hovering.
Click the WhatTheCSS icon in your toolbar. A small scanning bar drops in at the bottom of your viewport.
Move your cursor. Tooltip follows. Each element you pass over shows its authored CSS. Original units, shorthand form, pseudo-classes, the works.
Click the inspected element. Its CSS hits your clipboard,
ready to paste, with framework noise (--tw-*,
--chakra-*) filtered out.
Freeze any element into a four-tab live editor: the CSS, a WCAG contrast check, the box model, and the ancestor tree. Inspect, measure, tweak, and copy. Every bit of it free.
Press Space and the tooltip becomes a four-tab editor: CSS, Contrast, Box, Tree. Click any value to type, paste, or use the native color picker. Per-row revert (↺). Edits stick to the page until you reload.
Margin, border, padding, and the content box, drawn to scale with every number on it. Stop counting pixels in a screenshot.
The live WCAG ratio for any element, with its AA and AAA verdict. An accessibility check we will never put behind a paywall.
The full ancestor chain above the element you picked. Click any rung to jump to it, or walk the DOM with the arrow keys.
Press V and the tooltip strips back to what a designer actually needs. No cascade, no longhand, no framework noise. Just the type, the colors, and whether the contrast passes.
Free, forever. No account, no license.
$29 regular, $19 early bird, one-time. The three tools below unlock together.
Palette. Every unique color, with usage counts.
Fonts. Every typeface, weights in use, live samples.
Tokens. Every --* custom property,
grouped by prefix. Copy any row, or export the whole panel as
a :root { … } block.
Pin a component (the whole subtree, with its tokens,
@font-face rules, ancestor inheritance, and
@media overrides) and it opens prefilled in a
new CodePen tab. Or copy as an HTML snippet with
<link> + <style> ready
to paste anywhere. Inspecting a Tailwind site? Copy it as
clean Tailwind instead: the utility classes plus the design
tokens they reference, no expanded CSS.
Save anything you’ve pinned. Search, rename, delete with undo, re-export to CodePen. Backup the whole library as JSON. All local. Nothing leaves your browser.
Most inspect-and-copy extensions make the same four compromises. WhatTheCSS is an exception.
Sign-up needed?
Yes
No login or signup
Docks a panel?
Yes, the whole time
No, a movable tooltip
Feature maze?
Yes
Hover, freeze, copy
Pay to inspect?
Yes
No, inspecting is free
The free tier covers daily inspection work for everyone. Pro adds the extraction tools (component copy, audits, library, export) for the people who need them. No subscription, ever.
$0 forever
Everything you need for daily inspection work. No account, no card, no nag screens.
:hover, :focus, ::before)@media overrides$19 $29 one-time
One payment, lifetime access, one device. The extraction tools for design-system work and component sharing. 14-day, no-questions-asked refund.
--* property, grouped<link> + <style>DevTools shows you computed style. Every property, every inherited value, every browser default, in pixels. It’s built for engineers debugging their own code.
WhatTheCSS shows authored style. Only what someone actually typed, in the units they typed it, with framework internals (--tw-*, --chakra-*) filtered out. You’re not debugging. You’re identifying.
The free tier has no time limit, no nag screens, no upgrade prompts mid-session. Looking and tweaking is free: both views (Default and Peek), hover, freeze, live edit, element copy, the four-tab editor (CSS, Contrast, Box, Tree), WCAG contrast, DOM walk, and history. It’s not a trial.
Extracting is Pro ($29 regular, $19 early bird, one-time): component-mode copy (the whole subtree with its tokens, @media overrides, and fonts), page-wide audits, the component library, and CodePen, HTML, and Tailwind export. Every Pro feature is visibly marked in the UI; nothing surprises you with a paywall.
Nothing is injected into a page until you toggle the inspector on there (via the toolbar icon) — on pages you never inspect, WhatTheCSS runs no code at all. When on, the hover loop is a single requestAnimationFrame-throttled listener that walks already-loaded stylesheets. Zero network calls, zero eval, zero remote code.
The extension makes one network call ever, to validate your Pro license key, once a day, if you have one. No analytics, no telemetry, no usage tracking. Pages you inspect, components you save, edits you make: all of it stays on your machine.
Yes, including Shadow DOM web components, sites with strict Content Security Policy, and pages with cross-origin stylesheets (where it falls back to computed style with a banner explaining the downgrade).
Cross-frame inspection (iframes) is intentionally off. Local files (file:// URLs) need to be served via a local web server because Chrome treats every file:// URL as a separate origin.
Because a CSS inspector isn’t a service. There’s no server we run, no AI bill we’re passing through, no team you’re underwriting. You pay once, you get the extension and every update, indefinitely. The Pro license covers one device and comes with a 14-day, no-questions-asked refund.
Free download. Two minutes to install. No account.