Background Gradients

Multiple colour variables could be combined into a gradient using the native linear-gradient function of CSS. You can read more about linear-gradient at the MDN documentation page.

.selector {
  background: linear-gradient(to right, var(--yellow-400), var(--yellow-600));
}

Interactive Example

Feel free to play with this interactive example to get comfortable with the tool.