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-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
: 少し明るいダークシアン
参考