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.
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.
@layerprecedence, 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:rootdeclarations 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 Verbatim does it
Every stylesheet on the page is enumerated, including the cross-origin ones the page itself is forbidden to read, which the service worker refetches with credentials omitted and reparses. Each rule is matched against your element with the selector engine, then sorted the way the browser sorts: layer first, then specificity, then source order. Nesting is resolved against the parent selector list, shadow roots and adoptedStyleSheets are walked recursively, and shorthands are put back together as authored, because Chrome leaves the longhands empty when a shorthand contains var().
How to use it
- Press Alt+Shift+P on any page, or click the Verbatim icon.
- Choose Pick element. Nothing is armed until you do, so your clicks still belong to the page.
- Hover to outline, click to lock. The arrow keys walk up, down and along the DOM from there.
- Copy from any of the four modes, or press G to hand it to a coding agent.
What it will not do
- A frame from another origin cannot be picked. No extension can read into one, and hovering it says so rather than doing nothing.
- A transparent layer over an image is stepped over in favour of what is underneath, which is almost always what you meant. Arrow keys still reach the layer if you wanted it.
- Styles a script sets directly on the element are reported in the Inspect mode as disagreeing with the cascade, because that is what they are.
Compared with DevTools and computed-style extensions
Open DevTools, select the element, copy the styles, and you get the declarations as the browser computed them. That is a correct answer to a different question. Computation happens after the cascade has resolved, so five things have already been discarded: the hover and focus states, the media queries, the @layer order that decided the winner, the custom property names behind the values, and the fact that a shorthand was authored as a shorthand.
Pick element reads the rules instead of the result. You get the same declarations plus the four things above, and you get them for the whole subtree rather than one node, which is the difference between markup that renders and markup that arrives unstyled.
When to use this one
Use Pick element for one component you intend to rebuild. Use Design system when you want the page's palette, type scale and spacing rather than one card, and Design prompt when you want a model to build something in the same style rather than copy one piece of it.
Questions about Pick element
What exactly does Pick element copy?
Every CSS rule that matched the element and everything inside it, in cascade order, with the at-rules kept, plus the markup, the inherited context, the @font-face and @keyframes rules the subtree actually uses, and the :root custom properties its rules read.
Can I pick something inside an iframe?
Only a same-origin one. A frame from another origin is sealed by the browser to every extension, not just this one, so hovering it says so rather than silently doing nothing.
How do I select the parent instead of what I clicked?
The arrow keys walk the DOM from wherever you locked: up to the parent, down to the first child, left and right along the siblings. The window refills as you move rather than reopening.
Does it work on React, Vue or Tailwind sites?
Yes, and those are the cases it helps most, because the class names are machine generated and tell you nothing. The extraction is made from the rules that matched, so a hashed class name is still a rule with a selector, and the Tailwind tab converts the same pick to utilities.
Is Pick element free?
Yes, with no account and no sign in, like the rest of the extension. Only the MCP server for coding agents is paid.
Already have it? The first thirty seconds covers the shortcut, all thirteen keys and what to do if something does not work.