CSSグラデーションジェネレーターとは
CSS Images Moduleで画像として扱われるgradient関数を、画像ファイルを作らず視覚的に組み立てるツールです。生成するのは標準CSSで、PNGやSVGではありません。
linear-gradientの作り方
線形を選び、方向の角度と色を設定します。CSSの角度は0degが上、90degが右、180degが下、270degが左です。
background: linear-gradient(90deg, #2563EB 0%, #7C3AED 100%);radial-gradientの作り方
circleまたはellipseを選び、中心X・Yを0～100%で設定します。
background: radial-gradient(circle at 50% 50%, #2563EB 0%, #7C3AED 100%);conic-gradientの作り方
開始角度と中心X・Yを設定し、中心点の周囲を回る色の変化を作ります。
background: conic-gradient(from 0deg at 50% 50%, #2563EB 0%, #7C3AED 100%);色を3色以上使う方法
「色を追加」で最大8個までカラーストップを増やせます。カラーストップは色とgradient上の位置を指定するものです。追加位置は現在の最大間隔の中点になります。
グラデーションの角度を変更する方法
linearでは方向の角度、conicでは開始角度を数値またはスライダーで変更します。両者を混同しないラベルで表示しています。
repeating-gradientとは
指定した色区間を繰り返すgradientです。線形・放射状・円錐のすべてに対応し、最後の位置を100%未満にすると繰り返しが見やすくなります。
CSSグラデーションを背景に設定する方法
「CSSをコピー」で出力したbackground: ...;をCSSへ貼り付けます。ベンダープレフィックスや外部フレームワークのクラスは生成しません。
カラーストップと硬い境界
位置は0～100%で小数も使えます。同じ位置に異なる2色を置くと、なめらかな変化ではなく境界のはっきりしたhard stopを作れます。RGBやHSLから変換する場合はカラーコード変換をご利用ください。
よくある質問
CSSでグラデーションを作れますか？
はい。標準CSSのgradient関数を作成できます。
linear-gradientとは何ですか？
直線方向に色を変化させるCSS gradientです。
radial-gradientとは何ですか？
指定した中心から外側へ広がるgradientです。
conic-gradientとは何ですか？
中心点の周囲を回る角度方向のgradientです。
3色以上使えますか？
はい。色を追加して最大8色まで設定できます。
角度を変更できますか？
linearの方向とconicの開始角度を0～360degで変更できます。
グラデーションの中心を動かせますか？
radialとconicで中心X・Yを0～100%に設定できます。
repeating gradientを作れますか？
はい。3種類すべてで繰り返しを有効にできます。
透明色は使えますか？
初版では不透明な3桁・6桁HEXのみ対応しています。
PNG画像として保存できますか？
いいえ。このツールはCSS生成専用で、画像ファイルは生成しません。
入力した色は保存されますか？
保存・外部送信しません。すべてブラウザ内で処理します。