osgsm.io
HomeNotesCSS を使ったクールなグラデーション集

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

Published Feb 21, 2025
Updated Mar 15, 2025

クールなグラデーション集。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-gradientlinear-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: 少し明るいダークシアン

参考