Guides CSS
How to copy CSS from a website
Open the page, install a cascade-aware extension such as Verbatim, press Alt+Shift+P, choose Pick element and click what you want. You get every CSS rule that matched that element in cascade order, with its hover states, media queries and custom properties intact, ready to copy as CSS, Tailwind or a React component.
The four ways people copy CSS, and what each one loses
Every method below gets you something. The question is what it quietly drops on the way, because what it drops is usually the reason your rebuild does not match.
| Method | What you get | What it loses |
|---|---|---|
| DevTools, copy styles | The declarations on one element, as the browser computed them. | Hover, focus and active states. Media queries. Which rule won and why. Custom property names, replaced by their resolved values. Everything on the children. |
| View source, open the stylesheet | Every rule the site ships, exactly as authored. | Nothing tells you which of the five thousand rules touched your element. On a Tailwind or CSS-in-JS build the class names are machine generated and tell you nothing. |
| A computed-style extension | A long block of declarations that looks complete. | The same five things, because getComputedStyle runs after the cascade has resolved: states, breakpoints, @layer order, token names, and the fact that a shorthand was authored as a shorthand. |
| Screenshot into an AI | Something that looks roughly right at a glance. | Every number. A model reading pixels cannot tell #2E6FF2 from #2F6DF6, or 13px from 14px, and it will not tell you it guessed. |
| Cascade extraction | Every rule that matched, in the order the browser resolved them, with states, breakpoints, layers and tokens kept. | Nothing that decides how it looks. It cannot read a cross-origin iframe, and it reports script-set inline styles as disagreeing with the cascade, because that is what they are. |
The last row is what this guide is about, and Pick element is the tool that does it. If what you are after is narrower than the whole rule set, there are shorter routes: the font a page actually renders in, or its colour palette.
How to copy CSS from a website, step by step
One keyboard shortcut, one click, and the result is a window you can drag, resize and read before you paste anything.
- Install the extension and open the page you want to copy from. It runs in your own browser on the page you are already looking at, so pages behind a login work.
- Press Alt+Shift+P, or click the Verbatim icon, to bring up the toolbar in the page.
- Choose Pick element. Nothing is armed until you do, so your clicks still belong to the page.
- Hover to outline what you want and click to lock it. Arrow keys walk up to the parent, down to the first child, and along to siblings.
- Read the window that opens: the markup on the left, every rule that applies on the right in cascade order, and the extraction rendered back underneath so you can see it is right.
- Copy from the mode you need: Code for HTML and CSS, Tailwind for utility classes, Prompt for an AI brief, Inspect for the box model and the matched selectors.
Two details that save time later. Scope decides how much comes with the pick: component scope, the default, takes the element and everything inside it, which is what makes the copy render on its own. Depth limits how far down that goes when a component is enormous.
The live preview under the code is rendered from the code on the left, at the element's own width, on the surface it actually sits on. If the preview looks wrong, the copy is wrong, and you find that out here rather than in review.
How to copy a whole section or component, not just one element
Copying one element usually disappoints, and the reason is worth understanding. A section like .hero often declares nothing but padding and text alignment. Everything that makes it look like anything lives in its children and in what it inherits from its ancestors.
That is what component scope is for. It collects every rule touching the whole subtree, keeps cascade order, and adds three things a naive copy leaves behind:
- The inherited context, so the font and colour the section never declares still arrive.
- The
@font-faceand@keyframesrules the subtree actually uses, and only those. - The
:rootcustom properties the rules read, declared alongside rather than flattened into values.
Switch to element scope when you want only the one element, which is the right answer when you are debugging rather than rebuilding.
How to copy CSS as Tailwind, React, Vue or Svelte
The same pick comes out four ways, and switching between them does not re-read the page.
- Tailwind gives you the selection as utility classes, for v3 or v4, with the theme values the classes depend on. That matters: utilities alone are not portable if the design depends on tokens your project does not define.
- Code gives you the markup beside the CSS. The markup pane speaks plain HTML, or a React, Vue, Svelte, Astro or Angular component, in JavaScript or TypeScript.
- Prompt gives you a written brief with the values, the states, the breakpoints and the contrast figures, as markdown, for pasting into any chat.
- Inspect gives you the box model to a tenth of a pixel and every matched selector sorted by specificity, with its layer and at-rule context.
If you want a whole page rather than one component, that is a different job: Design prompt turns an entire site into one document, and Design system pulls the palette, type scale and spacing out as Tailwind @theme, CSS variables or W3C design tokens.
What actually decides how it looks, and why computed style loses it
This is the part that separates a copy that renders from one that nearly renders. By the time a style is computed, the browser has already thrown away the information you need to rebuild it.
@layerprecedence. An unlayered.btnbeats a@layer baserule of higher specificity. Specificity alone cannot explain that, so a tool that only sorts by specificity gets the winner wrong.- Cross-origin stylesheets.
sheet.cssRulesthrows on a stylesheet served from another domain, which is where most sites keep theirs. Those have to be refetched and reparsed or the rules simply are not there. - Interactive states. A hover rule is found by matching selectors against the element, including triggers on an ancestor. It cannot be found by watching where the mouse is.
- Breakpoints. A media query that does not currently apply still has to come out as a media query, or what you copied is one window width rather than a responsive component.
- Custom properties. You want both: the
var()name, so the copy joins your token system, and the literal, so it renders if it does not. - Shorthands. Chrome leaves the longhands empty when a shorthand contains
var(). Read the longhands and you get nothing; read the shorthand as authored and you get the rule.
None of this is exotic. It is what any modern site is built on, which is why the difference shows up on the first real page you try.
How to check the CSS you copied is actually right
Copying is easy to verify and almost nobody does it, which is why so many rebuilds are off by a shade.
The window renders the extraction in an isolated frame underneath the code, at the element's own width, on the surface it sits on. Anything missing shows up immediately as a component that collapses, loses its font, or comes out the wrong colour.
For agents there is a stricter version. The MCP server exposes verify_extraction, which renders what was copied and diffs it against the live element property by property, then reports every computed style that differs. An agent can call it on its own output before handing you the result.
How to copy CSS from a page behind a login
Use a browser extension rather than a crawler or a headless browser. An extension runs in your own browser, in your own session, on the page you are already looking at, so anything you can see it can read: a dashboard, a checkout, an admin panel, a page that only exists after a form submission.
The same applies to anything that only exists while you hold it open. A dropdown, a modal, a hover card, a tooltip: pick it while it is on screen and it copies like anything else. A headless browser has no session and no hands, which is exactly the gap Send to agent exists to close.
How to give the CSS to ChatGPT, Claude or Cursor
There are two routes, and the right one depends on whether your model is in a chat window or in your editor.
Paste it. The Prompt mode writes a brief with the values, states and breakpoints already resolved, so the model is reading measurements rather than describing a picture. For a whole site rather than one component, Design prompt produces one document: the palette as custom properties, the fonts and where they are served from, the CSS of the components that repeat, every section in order, the assets and the motion.
Hand it over directly. If you work in Cursor, Claude Code, Codex, Windsurf or VS Code, the MCP server gives your agent nine tools it calls itself, including the verification step above. Press G on any element and it goes straight to the agent, no copy and paste. That is the only route that reaches pages a headless browser cannot: see Send to agent.
Is it legal to copy CSS from a website?
Reading the CSS a website sends your browser is not the question. Your browser downloaded it in order to render the page, and inspecting it is what developer tools are for.
What you do next is the question, and it is a copyright one rather than a technical one. Reusing a style, a spacing rhythm or a technique is ordinary practice. Reproducing a whole page, its copy, its imagery or its brand is not, and no tool makes that acceptable. Trade dress and trademark cover the look of a brand in a way that CSS files do not.
The practical line most teams use: take mechanics, not identity. A shadow, a grid, an easing curve, a type scale, yes. The logo, the photography, the wording and the exact palette of a competitor, no. If you are copying to learn how something was built, you are on the ordinary side of it. This is not legal advice, and a lawyer is cheaper than a dispute.
Questions
How do I copy CSS from a website without DevTools?
Install a browser extension that reads the cascade, open the page, press the shortcut and click the element. Verbatim uses Alt+Shift+P, then Pick element. You get the rules that matched with their states, breakpoints and tokens, and a Copy button on each pane. No DevTools panel and no source reading.
Can I copy the CSS of a whole section rather than one element?
Yes. Component scope is the default: you get the element and everything inside it, plus the inherited context, the font-face and keyframes rules the subtree uses, and the custom properties its rules read. Element scope, for one element only, is one click away, and depth controls how far down component scope goes.
Does it copy hover states and media queries?
Yes. States are found by matching selectors against the element, including triggers on an ancestor, rather than by watching the mouse, so a state nobody hovered still comes out. Media queries are kept as media queries, including ones that do not apply at your current window width.
Why does the CSS I copied not look the same when I paste it?
Almost always one of five things is missing: a hover or focus state, a media query, an @layer that decided the winner, a custom property that was flattened into a literal, or the styles on the children. A computed-style dump loses all five, which is why it looks complete and renders wrong.
Can I convert the CSS I copied to Tailwind?
Yes. The same pick comes out as Tailwind utility classes for v3 or v4, with the theme values those classes depend on, which matters because utilities are not portable on their own if the design relies on tokens your project does not define.
Does copying CSS work on a page behind a login?
Yes, with an extension, because it runs in your own browser in your own session on the page you are looking at. Crawlers and headless browsers cannot reach those pages, which is also why anything that only exists while a menu is open can be copied this way and not any other.
Is Verbatim free?
The extension is free forever with no account: thirteen tools, unlimited use, including copying CSS, Tailwind, components, design systems and prompts. The optional MCP server for coding agents is free for 24 hours and then a one time purchase.