How to copy CSS from a website

Getting the rules behind one element, without dragging in a framework you did not ask for — and what to do when the stylesheet cannot be read at all.

Updated September 2026 · by the Design Toolkit team

1. Copy the rule from DevTools

Fine when the site ships readable CSS. Inspect the element, find the matching rule in the Styles panel, right-click the selector and you get Copy rule, Copy all declarations and Copy all changes if you have been editing.

Two things to know. The Styles panel shows rules in cascade order, so the declaration you want may be crossed out by one further up. And what you copy is the source text — var(--space-4) stays var(--space-4), which is no help if you are pasting it somewhere that has no such variable.

2. Take the computed values instead

This is the right answer more often than people expect, because of how modern sites are built:

• Utility frameworks spread one component across twenty single-purpose classes. There is no "the rule" to copy.
• Compiled CSS hashes class names into things like .mui-1wshw4o, which tell you nothing.
• Custom properties hide the value you are after behind a token.

The Computed tab sidesteps all three: it lists what the browser resolved every property to, after the cascade, after the variables, after the media queries. Filter it for the property you want and read the number.

One caveat worth keeping in mind: a computed value is a single number at one viewport. font-size: 44px in Computed may have been written clamp(28px, 3.5vw, 44px). If what you are rebuilding needs to hold at every width, check the Styles panel for the rule behind the number too.

3. Export it with an extension

DevTools gives you a property list. What you usually want is a block of CSS you can paste — the layout, the type, the colours and the effects together, with the values already resolved.

That is what a design inspector does. In Design Toolkit you hover an element and the side panel shows its box model, layout, typography and colours, with a code export that gives you the element as plain CSS, Tailwind classes or a React style object. No framework classes around it, no hashed selectors, no variables that do not exist on your side.

What to do about the parts that cannot be read

Two situations defeat "copy the rule", and both are common:

• Cross-origin stylesheets. A stylesheet served from another domain without CORS headers cannot be read by any script on the page. The browser applies it; nothing can enumerate it.
• Shadow DOM. A web component keeps its styles inside a shadow root, where the page's own rules stop.

In both cases the computed style still works, because it describes what was painted rather than where it came from. That is the general principle here: measured values beat source text, because the measurement is what you are actually trying to reproduce.

What to copy, and what not to

Worth saying plainly. Reading how a page is built is normal practice and it is how most people learn front-end. Copying spacing, type scale and easing is learning from good work.

Lifting an entire design is a different thing, and some parts of a page are not yours to take at all: the logo, the photographs, the copy, and usually the font, which is licensed to that company and not to you. If you need the same typographic feel without the file, see how to find what font a website uses — the last section covers matching a font you cannot license by its measurements rather than by eye.

Common questions

Read next