CSSグラデーション生成
linear / radial / conic の3種類のCSSグラデーションをGUIで作成。色や角度を調整すると、プレビューとCSSコードにすぐ反映されます。
カラーストップ(最大6色)
グラデーションの種類
- linear-gradient(線形): 指定した角度に沿って直線的に色が変化します。
0degは下から上、90degは左から右。背景やボタンなど最も使用頻度の高い形式です。 - radial-gradient(放射): 中心から外側へ円状に色が広がります。
circleは正円、ellipseは要素の縦横比に合わせた楕円で広がります。スポットライトや光沢の表現に向いています。 - conic-gradient(扇形): 中心の周りを回転するように色が変化します。開始角度(
from ○deg)で回転の起点を指定できます。円グラフやカラーホイールの表現に便利です。
カラーストップについて
各色の「位置(%)」はグラデーション内でその色が最も強く出る場所を指定します。隣り合うストップの位置を同じ値にすると、色がくっきり切り替わるストライプ状の表現も作れます。