> This page is part of the [Customer.io documentation](https://docs.customer.io). For the complete index, see [llms.txt](https://docs.customer.io/llms.txt).
> Last updated: July 10, 2026

# CSS variables

[BetaThis feature is new and we're actively working on it.](/accounts/settings/beta-experimental-features/#beta-features)

CSS variables (also known as CSS custom properties) help you define reusable styles and reduce duplication across your stylesheets. However, [most email clients don’t support them](https://www.caniemail.com/features/css-variables/). The CSS Variables transformer solves this by inserting the values of the variables.

## Statically insert `:root` CSS variables

Enable this transformer to convert your CSS variables into styles that are compatible with more email clients.

 Define CSS variables on the `:root` element in a `<style>` tag

We currently only support CSS variables defined in this way. We won’t process CSS variables on other elements or tags.

For instance, if you set these variables:

```css
:root {
  --primary-color: #ff0000;
  --secondary-color: #00ff00;
}


h1 {
  color: var(--primary-color);
}
h2 {
  color: var(--secondary-color);
}
.gradient {
  background: linear-gradient(
    0.25turn,
    var(--primary-color),
    var(--secondary-color)
  );
}
```

Then this transformer would convert them to:

```css
h1 {
  color: #ff0000;
}
h2 {
  color: #00ff00;
}
.gradient {
  background: linear-gradient(0.25turn, #ff0000, #00ff00);
}
```

### Preserve CSS variables

Enable this if you want to maintain your CSS variables in your source code, but have us generate a fallback for email clients that don’t support CSS variables.

*   *   [Statically insert `:root` CSS variables](#statically-insert-root-css-variables)
        *   [Preserve CSS variables](#preserve-css-variables)

Copy page

Copy page [Download .md](/messaging/design-studio/emails/code-editor/transformers/css-variables.md)

Is this page helpful?

![](https://docs.customer.io/images/export-success.png) ![](https://docs.customer.io/images/export-failure.png)

# How can we make it better?

Close

Do you need help from Customer.io support?  No  
 Yes

What part of Customer.io do you need help with? 

How can we improve this page?

Email (optional):  Please provide a valid email address

 I am not a bot

 

We appreciate your feedback!

Our support team will contact you as soon as possible