Soft Arctic Veil のグラデーション
#00D5F1 から #001805 までの、4 色のリニア CSS グラデーションです。OKLCH で補間しているので、中間の色も鮮やかなままです。
カラーストップ
| HEX | RGB | OKLCH | 位置 |
|---|---|---|---|
| #00D5F1 | rgb(0, 213, 241) | oklch(80.1% 0.139 211.4) | 0% |
| #00908B | rgb(0, 144, 139) | oklch(59% 0.102 190.5) | 33% |
| #005C45 | rgb(0, 92, 69) | oklch(42.2% 0.085 168.5) | 67% |
| #001805 | rgb(0, 24, 5) | oklch(18.3% 0.051 149) | 100% |
CSS
1つ目の宣言は、すべてのブラウザで使える通常の sRGB グラデーションです。2つ目は OKLCH で補間し、中間の色も両端と同じ鮮やかさに保ちます。
background: linear-gradient(270deg, #00D5F1, #00908B, #005C45, #001805); background: linear-gradient(270deg in oklch, #00D5F1, #00908B, #005C45, #001805);
Tailwind CSS v4
bg-linear-[270deg_in_oklch,#00D5F1,#00908B,#005C45,#001805]
自分好みに仕上げる
Gradient Maker でストップ、角度、種類を変更するか、ストップをパレットに変換できます。
関連するグラデーション
- Dusty Lumenlinear-gradient(315deg, #CFA9FF, #00707B, #001309)
- Deep Midnight Sunlinear-gradient(270deg, #002117, #006B74, #1A122D)
- Evening Midnight Sunlinear-gradient(90deg, #001002, #198175, #00D5F0)
- Velvet Borealislinear-gradient(120deg, #001C1A, #008AC3, #2F2E9A, #310032)
- Faded Arctic Veillinear-gradient(225deg, #F597EB, #0076A9, #002623)
- Distant Daybreaklinear-gradient(135deg, #1A9E6F, #3AD7F3, #DFF2FF)
- Wandering Blue Holelinear-gradient(90deg, #2E3652, #608DAA, #A8FFEF)
- Painted Sandbarlinear-gradient(200deg, #55F4E4, #00B9C9, #3A6ECE, #26238A)