What is WhatTheCSS used for?

WhatTheCSS is a browser extension for Chrome: hover over any element to read its authored CSS, freeze it into a live editor, check contrast and the box model, and copy clean rules. It is a good fit for copying a button's styles from another site, and checking contrast and spacing of an element.

Yes. WhatTheCSS has a free plan. Free for everyday use; Pro is $19 at an early-bird price.

Is WhatTheCSS open source?

No. WhatTheCSS is proprietary (closed-source) software. In the Developer Tools category, open-source options include Agentation, Visual Studio Code and Zed.

What are some alternatives to WhatTheCSS?

Other SaaS products in the Developer Tools category include Taillens, inspectDev and Qursor.

WhatTheCSS: features, pricing and alternatives

About WhatTheCSS

WhatTheCSS is an extension for Chrome aimed at designers and front-end developers. You click its toolbar icon, hover any element on any website, and a tooltip shows the authored CSS, meaning original units, shorthand and pseudo-classes, instead of the long computed list DevTools displays. Clicking copies the CSS to the clipboard with framework noise such as Tailwind and Chakra custom properties filtered out.

Pressing Space freezes an element into a four-tab editor: CSS, Contrast, Box and Tree. Any value can be edited by typing, pasting or using the native color picker, each row can be reverted, and edits last until the page reloads. Contrast shows the live WCAG ratio with AA and AAA verdicts, Box draws margin, border and padding to scale, and Tree shows the ancestor chain with jumps to any parent. The page description also mentions auditing a whole page. Daily use is free, with a Pro tier at an early-bird price.

Key features

Hover tooltip with authored CSS
Click to copy clean CSS
Freeze into a live four-tab editor
Per-row revert of edits
WCAG contrast check with AA and AAA
Box model drawn to scale
Ancestor tree navigation
Framework custom properties filtered out

Good fit for

Copying a button's styles from another site
Checking contrast and spacing of an element

Tags: css; chrome-extension; developer-tools; inspector; accessibility; front-end; design-tools

WhatTheCSS: questions and answers

What is WhatTheCSS used for?: WhatTheCSS is a browser extension for Chrome: hover over any element to read its authored CSS, freeze it into a live editor, check contrast and the box model, and copy clean rules. It is a good fit for copying a button's styles from another site, and checking contrast and spacing of an element.
Is WhatTheCSS free?: Yes. WhatTheCSS has a free plan. Free for everyday use; Pro is $19 at an early-bird price.
Is WhatTheCSS open source?: No. WhatTheCSS is proprietary (closed-source) software. In the Developer Tools category, open-source options include Agentation, Visual Studio Code and Zed.
What are some alternatives to WhatTheCSS?: Other SaaS products in the Developer Tools category include Taillens, inspectDev and Qursor.