概念

Linear gradient

線性漸層

.element {
    background: linear-gradient(black, white);
}

/* 指定方向或是給傳入特定角度 */
.element {
    background: linear-gradient(to right, black, white);
}

.element {
    linear-gradient(180deg, red, yellow);
}

Radial gradient

放射漸層，以圓或橢圓方式向外放射

.element {
    background: radial-gradient(white, black);
}

.element {
    radial-gradient(circle at center, red 0, blue, green 100%)
}

Conic gradient

圓錐形漸層

.element {
    background: conic-gradient(white, black);
}

Repeating and mixing

以上每一種 gradient 類型都可以使用 repeating 來達到重複的漸層效果，例如：repeating-linear-gradient、repeating-radial-gradient、repeating-conic-gradient

.element {
    background:repeating-conic-gradient(
      #f00 0, 
      #f00 15deg,
      #fa0 15deg,
      #fa0 30deg
  );
}

補充

輸入顏色可預覽 Linear gradient 不同方向的效果
Generate a CSS Color Gradient

參考資源

CSS TRICKS - CSS Gradients Guide
深入理解 CSS 漸層 ( CSS Gradient )