Variable declarations begin with two dashes (-) and are given a name and a value like this: --variable-name: value;
                                             
To use a variable, put the variable name in parentheses with var in front of them like this: var(--variable-name). Whatever value you gave the variable will be applied to whatever property you use it on.

You should add a fallback value to a variable by putting it as the second value of where you use the variable like this: var(--variable-name, fallback-value). The property will use the fallback value when there's a problem with the variable. 

Variables are often declared in the :root selector. This is the highest level selector in CSS; putting your variables there will make them usable everywhere.

Gradients in CSS are a way to transition between colors across the distance of an element. They are applied to the background property and the syntax looks like this:

Example Code
gradient-type(
  color1,
  color2
);

Gradients can use as many colors as you want like this:

Example Code
gradient-type(
  color1,
  color2,
  color3
);

You can specify where you want a gradient transition to complete by adding it to the color like this:

Example Code
gradient-type(
  color1,
  color2 20%,
  color3
);

Gradient transitions often gradually change from one color to another. You can make the change a solid line like this:

Example Code
linear-gradient(
  var(--first-color) 0%,
  var(--first-color) 40%,
  var(--second-color) 40%,
  var(--second-color) 80%
);

You can specify another direction by adding it before your colors like this:

Example Code
gradient-type(
  direction,
  color1,
  color2
);

You can add multiple gradients to an element by separating them with a comma (,) like this:

Example Code
gradient1(
  colors
),
gradient2(
  colors
);