How to copy CSS from a website

How to copy CSS with Chrome DevTools

Say you found a card, a heading, or a button you want to borrow for your own project. Here is the whole flow. The names below are Chrome's, but Firefox and Edge are nearly identical.

1. Right-click the element and choose Inspect. DevTools opens with that element already highlighted, so you never have to hunt through the page's markup.
2. Look at the Styles pane on the right. This is the list of CSS rules hitting your element. Rules that won are at the top, and anything struck through lost to something more specific, so you can ignore it.
3. Drag-select the lines you want inside a rule and copy them, or right-click the rule and choose Copy rule to grab the whole block, selector included.

One habit worth picking up: the Computed tab, next to Styles, tells you the final answer for any single property. If you just want to know "what size is that heading, exactly?" or "where is this padding coming from?", Computed shows the resolved number with a little arrow tracing which rule set it. Read values there, but do your copying from Styles. The next section explains why that distinction matters.

Computed vs authored styles: which one to copy

DevTools shows every element two ways, and copying the wrong one is the number one reason copied CSS disappoints.

• Authored styles (the Styles pane) are what the site's developer actually wrote. They are short, readable, and use the site's own variables, like padding: 12px 24px; border-radius: 8px;. This is the version you want in your project.
• Computed styles (the Computed pane, and what the right-click Copy styles option gives you) are the browser's math homework: every shorthand expanded, every variable replaced with its final value, every default spelled out.

Why care? A button the developer wrote in six tidy lines can compute out to 300+ properties. Paste that into your project and you have frozen a snapshot. If the padding was defined by a variable, that connection is gone; you got the number, not the system behind it. Fine for checking a value, bad for CSS you plan to live with.

Rule of thumb: copy from Styles when you want CSS to keep, and glance at Computed when you want a final number.

How to copy hover, focus, and active styles

Here is the annoying part everyone hits. You want a button's hover style, but the instant you move your mouse toward DevTools, the button is no longer hovered and the style disappears. DevTools has a fix: it can force the element to pretend it is being hovered.

1. Select the element in the Elements panel.
2. At the top of the Styles pane, click the small :hov toggle.
3. Check :hover (or :focus or :active). The element on the page now renders in that state, frozen, and the Styles pane shows the matching rules with an orange dot next to them.
4. Copy those rules like any others.

One non-obvious detail: if the button animates smoothly between states, look for a transition line in the normal (unhovered) rules, not the hover ones. Developers put it there so the animation runs in both directions. Grab it too, or your copy will snap instead of glide.

Why copied CSS is often bloated

Even when you copy from the right pane, a few things can make the result messier than what you saw on screen:

• Utility-class frameworks. On a Tailwind site, a button's look is spread across a dozen tiny classes, one declaration each. The Styles pane shows a stack of one-line rules instead of one readable block, and it is easy to miss a few.
• Machine-generated class names. Selectors like .Button__root-x81jq come from the site's build tools. The styles inside are fine to take; the names are gibberish in your project, so rename them.
• Inherited context. Sometimes an element looks right partly because of the font or line height set on the whole page. Copy only the element's own rules and you lose that, which is why a pasted component can render almost right but subtly off.

A useful habit after pasting: delete lines one at a time and watch what changes. Anything that changes nothing was noise, and now your copy is clean.

The faster way: copy CSS with Sitegeist

Everything above works, and it is worth knowing. But it is a per-element grind: inspect, untangle the cascade, force states, copy, clean up. If you are pulling more than a value or two, Sitegeist automates the whole thing. It is a free Chrome extension that reads the page right in your browser and hands you the site's design system in one click: the color palette with usage counts, the type scale and loaded fonts, spacing, real button styles, and a CSS variables export you can paste straight into a project.

For grabbing a single element, Sitegeist has an inspect overlay. Turn it on, hover anything on the page, and you get a curated summary of the styles that actually define its look, with the noise already filtered out. That is free. Pro ($19.99, one time) adds one-click copying of the element's full authored CSS plus its HTML: the real rules the developer wrote, with the markup they apply to, ready to paste. Pro also unlocks Tailwind config export and JSON design tokens if you would rather have the site's values as variables than as raw CSS.

If you have used a paid hover-to-copy tool like CSS Scan, the approach will feel familiar. As of this writing, the main difference is that Sitegeist's one-click teardown and inspect summary are free, with full element CSS and HTML copying in Pro. We compare the two directly on our CSS Scan alternative page.

Copying button styles with all their states

Buttons are the worst case for manual copying. A good button has four looks (default, hover, focus, active), usually a transition, and it leans on the page's typography. Doing that by hand means forcing each state in DevTools, copying four sets of rules, and stitching them back together.

Sitegeist's free buttons tab does the stitching for you. It finds the real buttons on the page and rebuilds them inside the extension with their hover, focus, and active states already captured, so you can try each state and read its styles without forcing anything. Pair that with the free CSS variables export and you have everything you need to rebuild a site's buttons in your own project.