CSS variables

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 ↗. 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.

For instance, if you set these variables:

: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:

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.