infora · Stylepick

How to Copy the CSS of an Element

Copying computed styles out of DevTools gives you a full dump of several hundred properties, nearly all of them browser defaults. What you usually want is the handful that make this element look the way it does.

Steps

1. Click the Stylepick icon in the toolbar.
2. Hover until the element you want is highlighted, then click to select it.
3. Press Copy CSS. The block is on your clipboard, ready to paste.

What you get

Only the properties that differ from the browser defaults, so the result is a short readable block rather than a wall of text. Shorthands are merged where it is safe to do so — margin, padding, border width / style / color, border radius, gap. Colors are written as hex, with rgba kept whenever there is transparency. The panel also notes anything it could not fully capture, such as SVG shapes or web components.

What is deliberately left out

• Width, height and position offsets, because they usually depend on the page around the element rather than the element itself.
• ::before and ::after styles, and hover or focus states.
• Elements inside embedded frames (iframes) cannot be picked at all.

Copying more than one element

Pro copies an element together with its children as ready-to-paste CSS rules, keeping the class names, and compares two elements side by side with the distance between them. $2.99 / month or $24 once; single-element copying stays free with no limit and no account.

Get the extension

Get Stylepick for Chrome