Using CSS Variables in Elementor

You can use CSS variables (custom properties) in Elementor in three ways:

• Reuse the variables Elementor already creates for your global colours and fonts, such as var(--e-global-color-primary).
• Define your own variables in your theme's CSS, or in Elementor Pro's custom CSS, and use them through the custom unit in Elementor's size controls or in your CSS.
• In the Elementor 4 Atomic Editor, create Variables in the editor itself; Elementor writes them out as CSS custom properties.

Whichever way you use, give each var() a sensible fallback and keep the names consistent.

This post explains how CSS variables work, how Elementor names and scopes the variables it creates, and where you can use your own in the free and Pro versions. It includes a worked example of a small spacing and colour system. The Elementor details come from Elementor's source code and help centre. We tested the CSS behaviour in Chromium, including two silent failures that are easy to miss.

CSS variables in one minute

A CSS variable is a property whose name starts with two dashes. You set it once and read it anywhere inside the element where it was set:

:root {
  --brand-blue: #1d4ed8;
  --space-m: 1.5rem;
}

.cta {
  background: var(--brand-blue);
  padding: var(--space-m);
}

Three properties make them useful for page building:

• They inherit. A variable set on :root or body is available to every element inside it.
• They can be overridden locally. Set a different value on a section, and everything inside that section uses the new value.
• They are live. Change the value in one place and every use updates, including values combined in calc().

<h2

The variables Elementor already creates

Elementor's Global Colors and Global Fonts, set in Site Settings, are output as CSS variables. Elementor's help centre says the global colours and fonts "use CSS variables", and its source code shows the naming pattern:

Table: Elementor's global variable names (from Elementor's source code)

Setting	Variable name pattern	Example
Global colour	--e-global-color-{id}	--e-global-color-primary
Global font family	--e-global-typography-{id}-font-family	--e-global-typography-primary-font-family
Global font size	--e-global-typography-{id}-font-size	--e-global-typography-text-font-size
Global font weight and line height	--e-global-typography-{id}-font-weight, ...-line-height	--e-global-typography-secondary-font-weight

The four default system colours have readable IDs: primary, secondary, text and accent. Custom colours you add get generated IDs, so the variable looks like --e-global-color-3f2a9c1. To find the exact name, inspect an element that uses the colour in your browser's developer tools and look at the variables listed for the body element.

Elementor attaches these variables to the kit's class, which sits on the body element (for example .elementor-kit-5). Everything inside body can use them. The html element cannot. In our Chromium test, a rule on html that used var(--e-global-color-primary, rgb(1, 2, 3)) fell back to the fallback colour, while a button inside body picked up the real value.

Elementor 4 Atomic Editor Variables

The Atomic Editor has its own Variables feature, managed in the Variables Manager. Elementor's help centre says variables currently cover colour, font family and size, with size variables available to Pro users. In Elementor's current source code, these are written out on :root as custom properties named after the variable's label, so a variable called brand-blue becomes --brand-blue. Check the output in your installed version, because Elementor 4 is changing quickly.

Before you start

• Know where your CSS will live. Free users can put CSS in the theme's Additional CSS (in the Customizer) or the Site Editor's Additional CSS (in block themes). Elementor Pro's Custom CSS is on the Advanced plan and above.
• Agree on names. Use a short, consistent prefix and purpose-based names, such as --space-s, --space-m, --radius-card.
• Set your global colours and fonts first in Site Settings, so you reuse Elementor's variables rather than duplicating them.
• Have your browser's developer tools ready to inspect computed values.

<h2

Step 1: define your own variables

Add your variables once, in a place that loads on every page. In a classic theme's Additional CSS:

:root {
  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4rem;
  --radius-card: 0.75rem;
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.06), 0 8px 24px rgb(0 0 0 / 0.08);
}

@media (max-width: 767px) {
  :root {
    --space-l: 2rem;
    --space-xl: 3rem;
  }
}

The media query changes the large spacing values on phones, once, for every element that uses them. Elementor's default mobile breakpoint is 767px; match whatever your breakpoints are.

To build a scale rather than picking numbers, the spacing scale generator outputs spacing steps as CSS variables, and the design token generator produces colour scales, type sizes, spacing and radii as CSS variables in one block.

Step 2: use them in Elementor controls

Many Elementor size controls offer a custom unit (the pencil icon in the unit menu). Elementor's help centre documents it for CSS math such as calc(2.5em + 2vw). In Elementor's source code, choosing the custom unit outputs whatever you type with no unit added, so a value such as var(--space-m) is written into the CSS as it stands. That makes it work for padding, margin, gap, width and font size wherever the custom unit is available. Because the help centre does not document var() specifically, check the result on the front end after you set it.

For colours, use Elementor's global colours in the colour picker rather than typing variables. They already are variables, and the picker keeps the link to Site Settings.

Step 3: use them in custom CSS

With Elementor Pro's custom CSS, selector refers to the current element:

selector {
  --card-bg: #ffffff;
  background: var(--card-bg);
  border-radius: var(--radius-card, 0.75rem);
  box-shadow: var(--shadow-card);
  padding: var(--space-m, 1.5rem);
}

selector.is-dark {
  --card-bg: var(--e-global-color-secondary, #0f172a);
}

Without Pro, give the element a CSS class in Advanced → CSS Classes and write the same rules against that class in your theme's CSS.

Worked example: a light and dark card from one set of rules

This illustrative example uses one card style and a local override, which is where custom properties pay off. We loaded the equivalent CSS in Chromium and read the computed values:

.card { --card-bg: #ffffff; background: var(--card-bg); }
.card.dark { --card-bg: #0f172a; }
.btn { background: var(--e-global-color-accent); padding: var(--space-m); }
.mathy { --step: 0.5rem; margin-top: calc(var(--step) * 3); }

Table: Computed values in Chromium

Element	Result
.card	Background rgb(255, 255, 255)
.card.dark	Background rgb(15, 23, 42), with no second background rule
.btn using Elementor's accent colour and --space-m: 1.5rem	Background rgb(245, 158, 11), padding 24px
calc(var(--step) * 3) with --step: 0.5rem	Margin 24px

To make a dark version of any card on the page, add the class dark in Elementor's Advanced tab. No other change is needed.

The silent failures

CSS variables fail quietly, which makes mistakes hard to spot. Our Chromium test showed three cases where the browser gave no error:

Table: How variables fail (tested in Chromium)

Mistake	CSS	What happened
Typo in the name	color: var(--e-global-color-primay)	The colour fell back to the inherited body colour (black)
Wrong kind of value	--gap: 20px; color: var(--gap)	Also fell back to the inherited colour
Variable not in scope	Kit variable used on html	Used the fallback value
Fallback provided	color: var(--does-not-exist, #374151)	Used #374151 as intended

A missing or wrong variable does not just skip the rule; the property behaves as if it had no value set and inherits or resets. Give variables a fallback in any rule where a wrong result would be visible, and check computed values in developer tools when something looks off.

Using variables for fluid sizes

Variables work well with clamp(). Define a fluid value once and reuse it:

:root {
  --step-heading: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
}

Generate the middle value with the CSS clamp generator. Our guide to fluid typography in Elementor explains the maths and where to apply it.

A naming scheme that lasts

Variable names outlive designs. Name variables by their job, not their current value, so a rebrand changes values without renaming anything:

Table: Purpose-based variable names

Avoid	Prefer	Why
--blue	--color-link (or Elementor's global colour)	The link colour may not stay blue
--24px	--space-m	The value can change at breakpoints
--big-radius	--radius-card	Says where it is used
--dark-bg	--surface-inverse	Still true if the dark theme becomes navy

When you create a dark variant with a local override, as in the card example, check that text on the new background still has enough contrast. Our guide to colour contrast explains the WCAG ratios to aim for.

Verify your setup

• Inspect an element on the front end and confirm the variable appears under the element or its ancestors with the expected value.
• Check the computed value of the property that uses it (for example, padding) in the Computed tab.
• Change a variable's value in developer tools and watch every use update. That proves the link is live.
• Test at your mobile breakpoint if you change variables in a media query.
• Check the editor preview and the live page; caching can serve old CSS until you clear it.

Common mistakes

• Typing hex values throughout pages instead of using global colours, so a brand change means editing every widget.
• Duplicating Elementor's global colours as your own variables with different values.
• Using custom colour IDs by guesswork rather than inspecting the real variable name.
• Defining variables in one page's HTML widget, so they only exist on that page.
• Using kit variables on html or outside the page body.
• No fallbacks in rules where a failure would be visible.
• Names based on appearance, such as --blue, that stop making sense after a rebrand.

Troubleshooting

Table: CSS variable problems in Elementor

Symptom	Likely cause	Fix
Property ignored, element looks unstyled	Misspelled variable name or wrong value type	Inspect computed styles; correct the name; add a fallback
Works in the editor, not on the live site	CSS file cached or variables defined only in the editor preview	Regenerate Elementor CSS (Elementor → Tools) and purge caches
Custom colour variable name changed	The colour was deleted and recreated, giving a new ID	Edit the existing colour instead of recreating it
var() typed into a control does nothing	The control has no custom unit, or the variable is undefined	Use CSS with a class instead; confirm the variable exists
Mobile values do not change	Media query breakpoint does not match Elementor's	Align the media query with your breakpoints

Frequently asked questions

Does Elementor use CSS variables?

Yes. Global colours and global fonts from Site Settings are output as variables such as --e-global-color-primary. Atomic Editor Variables are also output as custom properties.

How do I find the variable name for a custom global colour?

Inspect an element that uses the colour in your browser's developer tools. The variable is listed on the body element as --e-global-color- followed by an ID.

Can I use CSS variables in Elementor free?

Yes. Define them in your theme's Additional CSS, and use them through custom units or in CSS rules on classes you add in the Advanced tab. Pro's custom CSS is not required.

Can I type var() into Elementor's padding or font-size fields?

Where the control offers the custom unit, Elementor writes your value into the CSS as typed, so var(--space-m) works. Elementor documents the custom unit for calc(), so check the front-end result.

Are Atomic Editor size variables free?

Elementor's help centre lists size variables as available to Pro users; colour and font variables are part of the free version.

Why does my variable not work on the html element?

Elementor attaches its global variables to the kit class on body, so html is outside their scope. Define your own variables on :root if you need them there.

What happens if a variable is missing?

The property behaves as if unset, so it inherits or resets rather than using the value you meant. A fallback, such as var(--space-m, 1.5rem), prevents that.

Can I change variables at breakpoints?

Yes. Redefine them inside a media query, and every element that uses them updates at that screen size.

Should I use variables or Elementor global colours?

Use global colours for colours, because they are variables already and stay linked in the editor. Add your own variables for things Elementor does not globalise, such as spacing, radii and shadows.

Do CSS variables slow pages down?

Not noticeably for typical use. They are a native browser feature with no extra files to load.

Next step

Generate a spacing scale with the spacing scale generator, add it to your theme's Additional CSS on :root, and apply var(--space-m) to one section's padding through Elementor's custom unit. Then change the value once and watch every section follow.