CSS Custom Property Extractor - Online List & Copy Root Vars

CSS Custom Properties, also known as CSS variables, are entities defined by CSS authors using a -- prefix (e.g., --main-color: #3498db;). They allow you to store reusable values throughout your stylesheet. Unlike preprocessor variables (Sass/Less), CSS custom properties are live and can be accessed and modified at runtime via JavaScript, making them incredibly powerful for theming and dynamic styling. They cascade like regular CSS properties and can be scoped to specific selectors.

Simply paste your CSS code into the text area above and click Extract Variables. Our tool parses your CSS, identifies all custom properties (those starting with --), and displays them in a clean table with their names, values, and the selectors where they're defined. You can then copy them individually or in bulk — as raw CSS variables, as a complete :root block, or as a JSON object for use in JavaScript. The tool also supports uploading .css files and pasting directly from your clipboard.

CSS Custom Properties enjoy excellent browser support across all modern browsers. They are supported in Chrome (49+), Firefox (31+), Safari (9.1+), Edge (15+), and Opera (36+). Internet Explorer does not support CSS variables, but since IE's market share is now negligible and Microsoft officially ended support for IE in 2022, CSS custom properties are considered safe for production use in virtually all web projects today.

Sass/Less variables are compiled at build time and don't exist in the final CSS. They're static and cannot be changed after compilation. CSS Custom Properties, on the other hand, are native browser features that remain live in the DOM. They can be updated with JavaScript, respond to media queries, and cascade through the DOM tree. This makes CSS variables ideal for runtime theming (dark/light mode), component-level overrides, and dynamic styling. Many projects use both: Sass variables for build-time configuration and CSS custom properties for runtime flexibility.

Yes! The extractor handles minified CSS without any issues since it uses regular expressions that work regardless of whitespace. For nested CSS (e.g., @media blocks containing :root with variables inside), the tool employs a dual-pass scanning approach: first identifying rule blocks to capture selector context, then performing a global scan to catch any variables that might be in nested structures. For complex preprocessor nesting (SCSS/Less), we recommend compiling to standard CSS first for the most accurate results.

A common best practice is to define design tokens in :root for global values (colors, spacing, typography) and use scoped variables for component-level overrides. Consider using a naming convention like --namespace-category-property (e.g., --color-primary-500, --spacing-md, --font-heading). For theming, define your light theme in :root and dark theme overrides in a [data-theme="dark"] selector. This tool helps you audit and manage all these variables across your stylesheets.

CSS custom properties have negligible performance impact in modern browsers. The browser resolves them during the cascade and paint phases, which is highly optimized. While there is a theoretical cost to resolving var() references compared to static values, it's imperceptible in practice. However, avoid excessive deeply-nested var() chains and limit rapid JavaScript-driven updates to thousands of elements simultaneously. For 99.9% of websites, CSS variables are perfectly performant and the benefits far outweigh any micro-optimization concerns.