Webflags: g
CSS Custom Property (Variable)
Match CSS custom properties (variables) like `--brand-color` or `--font-size-lg`.
Try it in RegexPro →Available in
Pattern
regexengine-agnostic
--[a-zA-Z][a-zA-Z0-9\-]* (flags: g)Raw source: --[a-zA-Z][a-zA-Z0-9\-]*
How it works
-- is the literal double-dash that prefixes every CSS custom property. [a-zA-Z] requires the next character to be a letter (digits and hyphens are allowed elsewhere but not in lead position by convention). [a-zA-Z0-9\-]* allows the rest of the name: any combination of letters, digits, and hyphens.
Examples
Input
:root { --brand-color: #10b981; --space-4: 1rem; }Matches
--brand-color--space-4
Input
var(--text-primary, #fff)Matches
--text-primary
Input
.foo { color: red; }No match
—Common use cases
- •Design-token extraction from CSS files
- •Theme migration tooling
- •Dead-CSS-variable detection
- •Documentation generation for design systems
Related patterns
CSS hsl() / hsla() Color
WebMatch CSS hsl() and hsla() color functions, capturing hue (0–360), saturation, lightness, and optional alpha.
CSS rgb() Color
WebMatch CSS rgb() and rgba() color functions, including an optional alpha channel.
CSS Class from `class=""` Attribute
WebExtract the value of a `class="..."` attribute from raw HTML, handling double or single quotes.
Hex Color Code
WebMatch CSS hex color codes in both 3-digit (#RGB) and 6-digit (#RRGGBB) formats.