Features point at things

Copy the CSS of any element on any website

P Pick element in the toolbar, free with no account

The one people install it for. Hover to outline anything on the page, click to lock it, and a window opens with the markup beside every rule that styles it, the extraction rendered back underneath so you can see it is right.

Pick element on a real page. Silent, 2.0MB, and nothing is fetched until you scroll to it.

What you get

Every rule that matched, in cascade order
Not the computed value of one property at a time. The rules as they were written, with their own selectors, in the order the browser resolved them, so you can see which one won and why.
@layer precedence, resolved
Layer order decides winners in a way specificity alone cannot explain. It is kept and applied rather than flattened away.
Hover, focus and active states
Found by matching selectors against the element, so a state nobody triggered still comes out.
Breakpoints that are not active right now
Real media queries, kept as media queries, so the output is responsive rather than a snapshot of one window width.
The tokens behind the values
Both the var() name and the literal it resolves to, and the :root declarations the rules read.
Four ways out of the same pick
Code, Tailwind utilities, a written prompt, or the raw inspection. The markup pane speaks plain HTML or React, Vue, Svelte, Astro or Angular.

How to use it

  1. Press Alt+Shift+P on any page, or click the Verbatim icon.
  2. Choose Pick element. Nothing is armed until you do, so your clicks still belong to the page.
  3. Hover to outline, click to lock. The arrow keys walk up, down and along the DOM from there.
  4. Copy from any of the four modes, or press G to hand it to a coding agent.

What it will not do

Add to Chrome, free All thirteen tools

Next to this one