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