PickCodeRight-click the element in the Elements panel and choose Copy > Copy styles for its declarations, or right-click a rule in the Styles pane and choose Copy rule. None of these copy children, hover states and breakpoints together, which is what a picker extension adds.
The copy options DevTools gives you
- Copy > Copy styles (right-click a node in the Elements tree) copies the CSS declarations that apply to that one element as a flat list.
- Copy rule (right-click a rule in the Styles pane) copies the selector and its block, ready to paste into a stylesheet.
- Copy all declarations copies the body of one rule without the selector.
- Copy > Copy outerHTML copies the markup of the element and everything inside it.
- Copy > Copy selector gives you a CSS selector for the node, handy for testing in the Console.
Read the cascade before you copy
The Styles pane lists every rule that matches the element, most specific first. Declarations with a line through them are overridden by something above, so copying them adds noise. Inherited values (color, font) show under Inherited from and are easy to forget: if your paste looks unstyled, the font probably came from body.
The Computed tab shows the winner for each property. Click the arrow next to a value to jump to the rule that set it. This is the quickest way to answer "where does this 14px come from?"
Dump computed styles from the Console
Select the node in the Elements panel, then use $0 (the selected element) and the Console's copy() helper:
const s = getComputedStyle($0);
const keep = ['display', 'gap', 'padding', 'margin', 'font-size', 'font-weight',
'line-height', 'color', 'background-color', 'border-radius', 'box-shadow'];
copy(keep.map((prop) => prop + ': ' + s.getPropertyValue(prop) + ';').join('\n'));A short allowlist keeps the output readable. Computed values are resolved, so 2rem comes back as 32px and named colors come back as rgb().
Copy a whole element in one click with PickCode
- Open the picker. Press Alt Shift C. Hovering shows the size, font and Tailwind classes of each element.
- Inspect the rules. The Rules tab lists matching rules by specificity, with overridden declarations struck through and media queries marked active or inactive.
- Click to copy. One click copies the element and its children, with hover, focus and breakpoint styles it could read.
- Choose the format. Press 1 to 4 in the code panel for Tailwind, React, Blade or HTML + CSS.
Where the DevTools route falls short
- One element at a time. A card with ten children means ten trips through the Styles pane.
- No hover state unless you force it with :hov first.
- Media queries are listed but not combined into anything you can paste as responsive code.
- Class names point at the site's stylesheet. The output is CSS for their codebase, not yours.
If you write Tailwind, paste the copied rule into the free CSS to Tailwind converter to get utility classes.
Questions
Does Copy styles include hover states?
No. It copies the declarations for the current state. Force :hover with the :hov button first, then copy the hover rule separately.
Can DevTools copy CSS for an element and all its children?
Not in one action. Copy outerHTML gives you the markup for the tree, but styles are copied one element or rule at a time.
Why does the copied CSS use px when the site uses rem?
The Computed tab and getComputedStyle return resolved values in px. Copy from the Styles pane if you want the authored units.
How do I see which rule wins?
Open the Computed tab and expand the property. It links to the rule that set the final value, and the Styles pane strikes through the losers.