How to copy the CSS of any element from a web page

In Chrome DevTools, select the element, right-click a property in the Styles tab, and choose Copy declaration, Copy rule or Copy all declarations. The Styles tab shows the CSS as the author wrote it. The Computed tab shows the final values for every property, which is far longer than you usually want.

Method 1: copy from the Styles tab

1. Right-click the element on the page and choose Inspect. The Elements panel opens with the element selected.
2. Open the Styles tab. It lists the CSS rules that apply to the element.
3. Right-click any CSS property in a rule. The menu has these options, according to Chrome’s documentation:
   • Copy declaration: one property and value, in CSS syntax.
   • Copy rule: the whole CSS rule, including its selector.
   • Copy all declarations: every property and value inside that rule.
4. Paste into your editor and check the result.

The same menu has options such as Copy property, Copy value, and Copy declaration as JS, which is useful for CSS-in-JS code. A newer, experimental option copies all of your own CSS changes; it has to be enabled in DevTools settings first.

You may also see a Copy submenu with Copy styles when you right-click the element in the Elements panel. This item exists in current Chrome builds, but it is not described in Chrome’s official documentation, and the exact output has changed between versions. Paste it somewhere and read it before you rely on it.

Authored styles vs. computed styles

These two views answer different questions.

• Styles tab (authored). The rules as they were written, with their selectors, shorthands like margin: 0 auto, relative units like 1.5rem and custom properties like var(--brand).
• Computed tab. According to Chrome’s documentation, it shows only the CSS that is actually being applied to the element. The browser has resolved everything to final values: lengths in pixels, colors as rgb(), shorthands split into individual longhand properties. Check Show All and it lists every property, including inherited ones.

Use the Styles tab when you want to reuse the author’s rules. Use the Computed tab when you want to know what the browser ended up doing.

Why copied computed CSS is so long

Every element has a value for every CSS property, even if nobody wrote a rule for it. The Computed tab lists all of them, so most of what you copy is browser defaults and inherited values that did nothing special. The shorthands are expanded as well: a single border-radius becomes four longhand properties, and margin becomes four more. Copying that into your project buries the few declarations that define the look.

How to trim it to what matters

1. Start from the Styles tab if you can. It already contains only what the author wrote.
2. Delete defaults. Remove properties that match the browser’s default for that element, such as display: block on a div.
3. Delete inherited values that the element gets from its parent, like font-family and color on a child of the same text block. Set them once on the parent.
4. Keep the properties that define the look: layout (display, flex, grid, gap), spacing, typography, colors, borders, radius and shadows.
5. Collapse longhands back into shorthands (padding, margin, border, border-radius).
6. Handle states and responsive rules yourself. A copy of one element’s styles will not include :hover or :focus styles unless you turn the state on (the :hov button in the Styles tab does this), nor pseudo-elements like ::before, nor the @media rules that apply at other widths.
7. Replace pixel values with your own units or tokens if your project uses them, and check that any referenced fonts, images or variables exist in your project.

Respect other people’s work

Looking at how a page is built is a normal way to learn. Reusing it is a separate matter.

• The layout, illustrations, photos, icons and text of a website belong to their owners. Copying a distinctive design wholesale can infringe copyright or other rights, and passing it off as your own can mislead your customers.
• Fonts and images used by CSS are separate files with their own licenses. Copying the CSS does not give you the right to use the files it refers to.
• Some sites’ terms of use restrict copying. Read them if you plan to reuse more than a standard technique, such as a common flexbox pattern.
• The safest approach is to learn the technique, then build your own version with your own colors, wording and assets.

This is general information, not legal advice.

Where CSS Glance fits

CSS Glance is a Chrome extension. Its Pro version has a Copy CSS feature that writes out only the properties that differ from the browser defaults, with shorthands such as margin and border-radius collapsed, so there is less trimming to do. It copies what the browser computed for the element, so hover styles, pseudo-elements and media queries are not included. It cannot look inside iframes from other sites. The free version covers inspection and color copying. It is free on the Chrome Web Store (Pro features are a one-time purchase).