グラデーション作成 — CSSをそのままコピーする
色を並べて角度や位置を調整すると、CSSのコードが出ます。線形と放射状に対応し、Tailwindの書き方でも書き出せます。中間色のにごりを避ける色空間も選べます。
グラデーションは、2色を指定して終わりではありません。どの角度で、どの位置で色が切り替わるか。中間にどんな色が現れるか。この二つで印象がまったく変わります。
画面で調整しながら結果を見て、決まったらCSSをコピーする。手で数値を書き換えて確かめるより速く済みます。
中間がくすむ理由
青から黄色へのグラデーションを作ると、中間に灰色がかった緑が現れます。これは、標準のCSSがsRGBという色空間で数値を等間隔に混ぜるためです。数値としては中間でも、人の目には彩度の落ちた色に見えます。
OKLabという色空間で混ぜると、この沈みが起きません。人が感じる色の差が均等になるように作られた空間だからです。CSSでも in oklab と書けば指定できます。
対応していない古い環境では、指定が無視されて従来の混ざり方になります。見た目が大きく壊れることはないので、新しい書き方を使って差し支えありません。
よく使う形
| 形 | 書き方 | 使いどころ |
|---|---|---|
| 線形・上から下 | 180deg | 背景の自然な落ち込み |
| 線形・斜め | 135deg | カードやボタンの立体感 |
| 放射状 | radial-gradient | 中心に視線を集める |
| 3色以上 | 色の位置を指定 | 夕焼けのような複雑な変化 |
控えめに使うほうが効きます
全面に強いグラデーションを敷くと、その上の文字が読みにくくなります。背景に使うなら、同系色でごくわずかに変化させる程度が扱いやすく、上に何を置いても成立します。
ボタンに使う場合は、明るさの差を10〜20%程度に抑えると上品になります。差が大きいと古い印象になりがちです。
文字の上に重ねる場合は、グラデーションの最も明るい部分と最も暗い部分の両方でコントラスト比を確認してください。片方だけで判断すると、一部だけ読めない状態になります。
よくある質問
中間の色がくすみます。
OKLabで混ぜる設定にしてください。標準のsRGBでは、数値上の中間が見た目の中間になりません。
Tailwindで使えますか？
Tailwind向けの書き方でも書き出せます。
角度はどう決まりますか？
0度が下から上、90度が左から右、180度が上から下です。
作った設定は保存されますか？
保存されません。コードをコピーして使ってください。