# CSS variables

[BetaThis feature is new and we're actively working on it.](/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[](#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[](#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.