How to copy the CSS behind any element
Last updated: September 7, 2026
You want the styles behind a component you like, either to learn from it or to match it. The obstacle is that a page's stylesheet and the styles actually applied to an element are two very different things.
Method 1: copy from the Styles pane
Right click, Inspect, and the Styles pane shows the matching rules in cascade order.
Right click a selector for Copy rule, or a single declaration for Copy declaration. Either gives you the authored CSS, which is readable and short. Menu names here are from Chrome 152.
It is also frequently incomplete. What you see is one rule out of several that contribute, with the overridden ones struck through. Copying a single rule gives you a fragment that will not reproduce the look on its own, because the rest of the appearance came from a class further up, an inherited value, or a browser default.
Method 2: copy the computed styles
The Computed tab flattens all of that into the final values, which is usually what you want. It has no copy command though. The context menu there is navigation only, so you are reading values off the screen one at a time.
There is also a lot of it. Computed style covers every property the browser knows about, 476 of them in Chrome 152, nearly all sitting at their default. Somewhere in that wall are the fifteen declarations you actually wanted.
Method 3: copy from the console
Between the two, the console gives you the full computed set on the clipboard in one command. Inspect an element, then:
copy([...getComputedStyle($0)].map(p => `${p}: ${getComputedStyle($0)[p]}`).join(";\n"))copy() is a DevTools helper rather than standard JavaScript, so it only works in the console. Be warned that this is the full set, around 500 declarations, so it is a starting point to prune rather than something you paste into a stylesheet.
Method 4: copy just what matters
The useful middle ground is the set of properties that are actually doing something, in a form you can paste.
Screen Ruler reads the computed styles for the element you select and gives you them as a rule you can copy straight out, filtered down to the declarations doing real work rather than the several hundred defaults. That part is free. It will also emit Tailwind classes and let you search by selector, both paid.
You can search by CSS selector to find every element a rule applies to, which is the fastest way to answer "where else is this used" before you copy anything.
What else is worth knowing
- Pseudo-element styles are separate. A component's arrow or underline often lives in
::beforeor::after, and copying the element's own rules will miss it entirely. - State styles will not appear until you force them. Hover, focus and active rules are only visible if you toggle the state, otherwise you copy the resting appearance and wonder why the interaction is missing.
- Copied CSS is still someone else's work. Learning from a technique is normal practice. Lifting a whole component wholesale is not, and the license on the site applies to its code as much as its content.
Common questions
Why does the copied CSS look different on my page?
Inherited values. Font, color and line height often come from an ancestor rather than the element itself, so the rule is complete but the context is not.
How do I copy styles for a hover state?
Force the state first. In DevTools that is the :hov toggle in the Styles pane; then copy as normal.
Can I get the CSS for several elements at once?
Not from DevTools, which is element by element. Searching by selector and stepping through the matches is the practical way to do it.