カラーストップ
CSS出力
プリセット
テーマをクリックすると、設定済みのグラデーションが即座に読み込まれます。
仕組みとCSS構文
このツールは、グラデーション関数を使用して標準的なCSSの `background-image` プロパティを視覚的に構築します。色を追加したり位置を変更したりすると、ジェネレーターはモダンブラウザに必要な正確な構文を計算します。
線形グラデーション (Linear Gradients)
線形グラデーションは、直線に沿って色が変化します。構文は以下の通りです：
linear-gradient(angle, color1 position1, color2 position2, ...)
角度 (angle) は方向を決定し（例：90deg は左から右）、位置 (position) は色が最も純粋な状態になる場所（0%から100%）を決定します。
放射状グラデーション (Radial Gradients)
放射状グラデーションは、中心点から外側に向かって色が変化します。構文は以下の通りです：
radial-gradient(shape at position, color1 pos1, color2 pos2, ...)
形状 (shape) は circle（正円）または ellipse（楕円）を指定できます。このツールでは、位置を要素の中央（center）にデフォルト設定しています。
円錐形グラデーション (Conic Gradients)
円錐形グラデーションは、円グラフのように中心点を軸に色が回転しながら変化します。構文は以下の通りです：
conic-gradient(from angle at center, color1 pos1, color2 pos2, ...)
円錐形グラデーションは、色相環、円グラフ、複雑な角度パターンの作成に最適です。