How to Get CSS Variables (Custom Properties) from Any Website
Install the free AssetPullKit Chrome extension then visit any website, open the Colors → Copy CSS vars tab and your results appear instantly. No DevTools, no code, no account.
CSS custom properties (variables) control modern design systems, but extracting them manually is tedious. DevTools inspection requires hunting through stylesheets, copying values individually, and cross-referencing declarations across files. Right-clicking inspects only computed values, not the actual variable names or their definitions. Designers and developers waste time recreating color tokens, spacing scales, and typography variables they see on competitors' sites or reference designs. AssetPullKit solves this instantly: one click extracts all CSS variables with their exact names and values, ready to paste into your own project's root stylesheet or design tokens file.
Step by Step: How to Get CSS Variables (Custom Properties) from Any Website
Install AssetPullKit for free
Go to the Chrome Web Store and add AssetPullKit to Chrome. Takes 10 seconds, no account needed.
Install AssetPullKit free →Navigate to any website
Go to the website you want to inspect. AssetPullKit works on any live URL.
Open the Colors → Copy CSS vars tab
Click the AssetPullKit extension icon in your Chrome toolbar. Switch to the Colors → Copy CSS vars tab. Results appear instantly.
Copy or download what you need
Use the copy or download buttons next to each result. For colors, click Copy CSS vars to grab the full palette at once.
Tips and What to Look For
Open any website, click AssetPullKit, navigate to the Colors tab, and select 'Copy CSS vars' to extract all custom properties in valid CSS format. The extension parses :root and scoped variable declarations, preserving naming conventions (--color-primary, --spacing-lg). Results appear as ready-to-use CSS snippets. For accuracy: disable browser extensions that inject styles, check if variables are scoped to specific selectors (not just :root), and verify hex/rgb output matches your target. Edge case: CSS-in-JS libraries or dynamically injected variables may not display: focus on stylesheet-defined properties.
Combine Colors → Copy CSS vars with the Fonts tab to reverse-engineer entire design systems in minutes. Copy the CSS variables, then extract font families and sizes, creating a complete foundation for design token files before coding a single component.
Who This Guide Is For
Frontend developer
Frequently Asked Questions
What is the easiest way to Get CSS Variables (Custom Properties) from Any Website
The fastest way is to use AssetPullKit, a free Chrome extension that extracts everything in one click without opening DevTools.
Does it work on any website?
Yes. AssetPullKit works on any live website including Framer, Webflow, Shopify, WordPress, Next.js, and more.
Is AssetPullKit free?
Yes, completely free. No account, no subscription, no tracking.
Does it send my data anywhere?
No. All scanning runs inside your browser. No page data ever leaves your machine.
Free to install. Works in seconds.
Install AssetPullKit now and extract CSS variables in seconds, not hours.
Add to Chrome, it's free