CSS を使ったクールなグラデーション集

クールなグラデーション集。CSS と簡単な解説付き。

inspired by Radix Primitives.

.box {
  background: radial-gradient(
    circle at 50% 180%,
    rgb(253 39 143 / 30%) 30%,
    rgb(253 76 253 / 15%) 50%,
    rgb(0 119 255 / 23%) 60%,
    transparent
  );
}

• radial-gradient
  • circle at 50% 180%: X軸中央、Y軸 180% の位置に円形グラデーションを描画
  • rgb(253 39 143 / 30%) 30%: 透明度 30% のピンク at 30%
  • rgb(253 76 253 / 15%) 50%: 透明度 15% のパープル at 50%
  • rgb(0 119 255 / 23%) 60%: 透明度 23% のブルー at 60%
  • transparent: 終了は透明

.box {
  background:
    radial-gradient(
      ellipse at 100% 100%,
      rgb(7 0 31 / 12%),
      rgb(68 34 255 / 6%),
      transparent
    ),
    linear-gradient(to bottom right, #0f1b1b, #141726, #37172f, #082c36);
}

radial-gradient と linear-gradient を組み合わせている。

• radial-gradient
  • ellipse at 100% 100%: 右下からの楕円形のグラデーション
  • rgb(7 0 31 / 12%): 透明度 12% の彩度低めのダークパープル
  • rgb(68 34 255 / 6%): 透明度 6% の彩度高めのパープル
  • transparent: 終了は透明
• linear-gradient
  • to bottom right: 右下に向かっての線形グラデーション
  • #0f1b1b: ダークシアン
  • #141726: ダークブルー
  • #37172f: ダークマゼンタ
  • #082c36: 少し明るいダークシアン

参考

• Radix Primitives