How to Extract CSS from Any Website (3 Methods)

You found a button, a card, a whole layout you want to study, and now you need the CSS behind it. There are three reliable ways to extract CSS from a website, and which one you want depends on how much you’re grabbing:

• Browser DevTools: free, built in, best for one element or one stylesheet.
• A browser extension like Hoverify: fastest when you do this often or want a whole component with its styles.
• A command-line script: the right tool when you need CSS from many pages at once.

One legal note before the how-to: extracting CSS to learn from it or debug with it is normal practice. Shipping someone else’s design wholesale is a different thing. We wrote a whole piece on whether copying CSS from production sites is legal and ethical if you want the long version.

Method 1: Browser DevTools

Every browser ships with everything you need for small extractions.

Open DevTools with F12 or Ctrl+Shift+I (Cmd+Option+I on Mac), or right-click the element you care about and pick “Inspect.” That drops you into the Elements panel (Inspector in Firefox) with the element already selected.

From there:

1. Read the Styles pane. It shows the authored CSS rules hitting your element, in cascade order, with overridden declarations struck through. Right-click a rule to copy a single declaration or the whole rule. Chrome also offers “Copy styles” on the element itself in the Elements panel context menu.
2. Check the Computed tab when confused. It shows the final resolved value of every property, with an arrow back to whichever rule won. This is where you untangle “why is this padding 24px when I see 16px in the stylesheet.”
3. Grab whole stylesheets from the Network panel. Reload with DevTools open, filter by “CSS,” and you’ll see every stylesheet the page loaded. Click one to view it, or right-click to save it. The Sources panel lists the same files as a tree. If a file is minified into one endless line, hit the {} pretty-print icon.

The trap to know about: the Computed tab is not the source code. It shows resolved values (every rem turned into pixels, every CSS variable expanded, every shorthand exploded into longhands). Copy from Computed and you get working but bloated, hard-coded CSS. When you want the styles as the author wrote them, copy from the Styles pane or download the actual stylesheet.

Also watch for CSS that arrives late. Sites with code-split bundles load stylesheets as you navigate and interact, so keep the Network panel open while you click around, or you’ll only capture the styles for the first view.

Method 2: Hoverify (our extension)

Disclosure up front: Hoverify is built by us. DevTools does everything in this section eventually; the extension exists because “eventually” gets old when inspecting other sites is something you do daily.

The Inspector shows an element’s HTML and CSS the moment you hover over it, without opening a panel or losing your place on the page. From there:

• Copy exactly what you see. Properties, whole rules, or the element’s HTML.
• See the authored source, not just resolved values. The code tab includes Source CSS, the rules the Inspector extracted from each matching selector, so you avoid the computed-styles trap from Method 1.
• Export a whole component. Grab an element with all of its children and their styles in one action, and send it straight to CodePen to experiment with. This is the feature that replaces the copy-paste-fix-selectors loop entirely.
• Get the styles DevTools makes you dig for. Pseudo-classes, pseudo-elements, media queries (including nested ones), and animations show up alongside the regular rules. OKLCH colors parse correctly, which matters more every year.
• Pull the page’s color palette. Every color in use, deduplicated and filtered, ready to copy. Handy when what you actually wanted from the site was its palette, not its layout.

You can also edit any of it live (the Inspector doubles as a visual editor), which turns “extract, paste, adjust, reload” into “adjust it right there and copy the result.” If you’re studying a design rather than lifting one rule, the same license includes asset extraction for the images and SVGs, and there are longer walkthroughs of both in our guide to pulling images off a page and our guide to reverse-engineering e-commerce UX.

Hoverify is paid ($30/year or $89 lifetime, three browsers per license, 14-day refund policy) and runs on Chrome, Firefox, and Chromium browsers like Brave, Edge, and Arc. If you extract CSS once a quarter, stick with DevTools. If it’s part of your week, this is the tool we wish had existed, which is why we built it.

Method 3: Command line, for bulk extraction

When the job is “get the CSS from these 40 pages,” neither DevTools nor an extension makes sense. A short Puppeteer script does:

const puppeteer = require('puppeteer');

async function extractCSS(url) {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto(url, { waitUntil: 'networkidle0' });

    const styles = await page.evaluate(() => {
        const styleSheets = Array.from(document.styleSheets);
        return styleSheets.map(sheet => {
            try {
                return Array.from(sheet.cssRules)
                    .map(rule => rule.cssText)
                    .join('\n');
            } catch (e) {
                // Cross-origin stylesheets throw; fetch those separately if needed
                return '';
            }
        }).join('\n');
    });

    await browser.close();
    return styles;
}

The waitUntil: 'networkidle0' matters: it makes Puppeteer wait for late-loading stylesheets before reading them. The try/catch matters too, because stylesheets served from another origin (CDNs, font providers) block JavaScript access to their rules. For those, grab the href from document.styleSheets and fetch the file directly.

Batch processing is a loop away:

const fs = require('fs');
const path = require('path');

async function batchExtract(urlList) {
    const results = {};

    for (const url of urlList) {
        const css = await extractCSS(url);
        const filename = `${path.parse(url).name}.css`;
        fs.writeFileSync(filename, css);
        results[url] = filename;
    }

    return results;
}

Two practical warnings from having done this: add a small delay or concurrency limit so you’re not hammering someone’s server, and expect the output to contain a lot of duplication, since every page of a site usually loads the same base stylesheets. Run the results through a deduplicator or just diff them before assuming each file is unique.

After you extract

Whatever method you used, extracted CSS rarely drops into a project untouched. The selectors reference a DOM you don’t have, the values assume fonts you haven’t loaded, and there’s usually far more of it than the component needs. Strip it down to the rules that matter, rename selectors to match your conventions, and test in more than one browser, because extracted styles have a way of depending on vendor-specific behavior you didn’t notice on the original site. Our CSS browser compatibility guide covers the usual suspects.

The short version of this whole guide: one element, use DevTools; regular inspection work, use Hoverify; many pages, script it. All three get you the CSS. The difference is how much of your afternoon they take.