Guide

How to copy CSS from a website: 3 ways

Updated 24 October 2026 · Chrome, Edge, Firefox and Safari

The short answer

Right-click the element and choose Inspect. In the Styles pane of DevTools, right-click a rule and choose Copy rule. Do that for each rule that styles the element. If you want every rule, with the element’s hover states and breakpoints, in one go, use a CSS copy extension that reads the stylesheets, such as StyleLift.

Below are the three ways in detail, what each one really copies, and why copying from the Computed tab gives you hundreds of lines you don’t want.

The example

One button, as a site might write it: a couple of CSS variables, a hover and a focus style, and a breakpoint that makes it full width on phones.

<a class="btn" href="/signup">Get started</a>

:root {
  --brand: #3b5bfd;
  --space: 1rem;
}
.btn {
  display: inline-block;
  padding: calc(var(--space) * 0.75) var(--space);
  border-radius: 8px;
  background-color: var(--brand);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.btn:hover {
  background-color: #2a44d8;
}
.btn:focus-visible {
  outline: 2px solid #2a44d8;
  outline-offset: 2px;
}
@media (max-width: 600px) {
  .btn {
    display: block;
    text-align: center;
  }
}

That’s the CSS you’d want to end up with. Here’s how close each way gets.

Way 1: DevTools, one rule at a time

Every desktop browser has developer tools built in. These steps are for Chrome and Edge, which share the same DevTools; Firefox and Safari follow below.

Inspect the element. Right-click it and choose Inspect. Or press Ctrl Shift C (⌘ ⌥ C on a Mac) and click it. The Elements panel opens with the element selected.
Find its rules. The Styles pane lists every rule that matches the element, the one that wins first, with overridden declarations struck through. At the bottom are the browser’s own defaults (“user agent stylesheet”), which you don’t need.
Copy a rule. Right-click inside the .btn rule and choose Copy rule. You get the rule exactly as written, selector and braces included, with var() left alone.
Repeat for each rule that styles the element, and paste them together.

The same menu has Copy declaration (one line), Copy all declarations (the rule without its selector) and Copy declaration as JS / Copy all declarations as JS, which write backgroundColor: 'var(--brand)' style objects.

Two things this way misses, both of which the example has:

States. .btn:hover and .btn:focus-visible aren’t listed until you force the element into that state. The hover and @media guide shows how.
Breakpoints. The @media (max-width: 600px) rule is listed only while the window is narrower than 600px. And when it is, Copy rule copies the rule without the @media line around it, so you have to add that back by hand.

“Copy styles”: everything at once, without selectors

Right-click the element’s node in the Elements panel and choose Copy → Copy styles. It’s often described as copying the computed style. It doesn’t. It copies the declarations that currently win the cascade, as written, as a flat list:

no selector and no braces, so you have to wrap it yourself;
no browser defaults, and no ::before or ::after rules;
only the rules that match right now: no :hover rule unless you forced it (and then it’s merged into the list), and only the @media rules that apply at the current width, without the @media line;
every custom property the element inherits. On a site with a design system, that’s every token on :root, often dozens of lines before the ones you wanted.

In Firefox and Safari

Firefox: right-click the element and choose Inspect. In the Rules view, right-click a rule and choose Copy Rule (the menu also has Copy Declaration, Copy Selector, Copy Property Name and Copy Property Value). Like Chrome, it leaves out the @media line, and Firefox has nothing like “Copy styles”.
Safari: turn on the developer tools first: Safari → Settings → Advanced → Show features for web developers. Then Control-click the element and choose Inspect Element. In the Styles sidebar, click the small icon to the left of a rule’s selector and choose Copy Rule. Safari’s Copy Rule does keep the @media around the rule.

Way 2: computed styles, and why they’re so noisy

The Computed tab, next to Styles, shows the final value of each property the page sets on the element. Tick Show all and it lists every CSS property there is. From JavaScript, getComputedStyle(element) returns the same list. For the example button in Chrome, that’s more than 400 properties. Here are some of the ones the page set:

display: inline-block;
padding-top: 12px;
padding-right: 16px;
padding-bottom: 12px;
padding-left: 16px;
border-top-left-radius: 8px;
background-color: rgb(59, 91, 253);
color: rgb(255, 255, 255);
font-weight: 600;
text-decoration-line: none;

Everything that made the CSS readable is gone: var(--brand) is now rgb(59, 91, 253), 1rem is 16px, padding is four separate properties, and the hover, focus and breakpoint rules aren’t there at all, because computed styles describe only the element’s state right now. The Computed tab’s right-click menu doesn’t even have a copy item; you’d select the text by hand.

Computed styles are still the right tool for one question: what value does this property end up with? In the Console, getComputedStyle($0).getPropertyValue('padding-top') answers it for the element selected in the Elements panel.

Computed vs authored CSS

Authored CSS is what the site’s developers wrote: selectors, shorthands, variables, rem and %, :hover rules and @media blocks. The browser then works out a computed value for every property of every element: relative units and variables resolved, defaults filled in. What getComputedStyle() returns is, strictly, the resolved value: the computed value for most properties, and the used value (after layout) for a few such as width and height. MDN explains the steps in CSS property value processing.

To rebuild something, you want the authored version. Computed values reproduce one element at one window size; authored CSS keeps working when the content, the font size or the screen changes.

Way 3: a CSS copy extension

An extension can read the page’s stylesheets the way DevTools does, and write out the rules for you. With StyleLift, click its toolbar button (or press Alt Shift C), hover the button and click it. This is what it copies, with its default settings, in a 1280 × 800 window:

a.btn {
  display: inline-block;
  padding: calc(var(--space) * 0.75) var(--space); /* 12px 16px */
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  color: #ffffff;
  background-color: var(--brand); /* #3b5bfd */
}

a.btn:hover {
  background-color: #2a44d8;
}

a.btn:focus-visible {
  outline: #2a44d8 solid 2px;
  outline-offset: 2px;
}

/* Responsive rules (viewport now 1280 × 800) */

@media (max-width: 600px) {
  a.btn {
    display: block;
    text-align: center;
  }
}

The selector, the variables (with their values beside them), the hover and focus rules and the breakpoint, from one click, even though the window is wider than 600px and the pointer isn’t on the button. It differs from the original in small ways: the selector gains its tag (a.btn), colors are written one way (hex here; rgb or hsl if you prefer), and the outline shorthand comes out in the browser’s order.

Shift-click copies the whole component instead: the HTML of the element and everything inside it, plus the CSS for all of it, ready to paste into CodePen or your project. The live demo on the home page runs StyleLift’s real CSS engine on a sample site, so you can try both without installing anything.

Limits worth knowing: browsers don’t let any extension run on their own pages, extension stores or the PDF viewer, and when a site loads its stylesheets from another domain that doesn’t allow reading them, no extension can see those rules. StyleLift then measures sizes instead and says so in the panel.

Free for 7 days, no card needed. $9 once for a lifetime license. All sales are final.

Which way to use

What each way copies, for the example button
Way	Selector	:hover and :focus rules	@media rules	Variables
DevTools “Copy rule”	Yes	After forcing the state, one rule at a time	Only while it applies, without the @media line (Safari keeps it)	As written
DevTools “Copy styles”	No	Only if forced, merged into the list	Only the ones that apply now, flattened	As written, plus every inherited one
Computed styles	No	No	No	Resolved to values
StyleLift	Yes	Yes, as their own rules	Yes, in their @media blocks	As written, with the value beside each

Use DevTools to look at one rule, or to edit styles live and see the result. Use computed styles to check a final value. Use an extension when you want the element’s CSS in a form you can paste and keep working with.

Using copied CSS responsibly

Copying CSS is a great way to learn how something was built, to debug your own site, to prototype, and to rebuild your own designs. The CSS and HTML you copy still belong to the people who made the site: copying them gives you no rights to their work. Learn from it and write your own, and if you want to reuse a site’s code as it is, check its license or ask. Don’t copy a site’s whole look and pass it off as yours.

More guides

Copy an element’s :hover and @media CSS
How to find an element’s hover, focus and breakpoint rules in DevTools, keep their @media lines, read its CSS variables, and copy it all in one click.