ビジュアルエディターで美しいリニア、ラジアル、コニックグラデーションを作成します。複数のカラーストップを追加し、角度を調整し、CSSコードを即座に生成します。
グラデーションタイプボタンから線形、放射状、または円錐を選択します。ライブプレビューが即座に更新されます。
カラーピッカーと位置スライダーを使って色を定義します。「ストップを追加」で色を追加したり、ゴミ箱アイコンで削除したりできます。上下矢印でストップを並べ替えられます。
線形・円錐グラデーションの場合、角度スライダー（0°～360°）をドラッグしてグラデーションの方向を制御します。放射状グラデーションでは角度は使用しません。
「CSSをコピー」をクリックしてbackgroundプロパティをクリップボードにコピーするか、グラデーションをSVGファイルとしてエクスポートします。共有ボタンを使ってグラデーションを再現するリンクを送ることもできます。
「ランダム化」をクリックしてランダムな角度の2色グラデーションを生成するか、「クリア」ですべてをデフォルト設定にリセットします。
各カラーストップは0%から100%までの色と位置を定義します。ブラウザはCSSグラデーション仕様に従って隣接するストップ間の滑らかな遷移を計算します。複雑な多色効果を作成するために必要な数だけストップを追加できます。
ツールは選択した角度でCSS linear-gradient()を生成します。色は始点から終点まで直線に沿って混合されます。角度を変更するとグラデーションの方向が回転します。
放射状グラデーションはradial-gradient(circle)を使用して、中心から外側に向かう円形の色の遷移を生成します。円錐グラデーションはconic-gradient()を使用して、設定した角度から中心点の周りに色を回転させます : 円グラフ、カラーホイール、装飾効果に便利です。
SVGとしてエクスポートすると、ツールはカラーストップをSVGグラデーション要素（linearGradientまたはradialGradient）に変換し、デザインツールで使用したりWebページに埋め込んだりできる独立したSVGファイルにまとめます。
グラデーションタイプ、角度、カラーストップがページURLにエンコードされます。このURLを共有すると、誰でも手動で再作成することなく、ブラウザで全く同じグラデーションを開くことができます。
3つのタイプを作成できます：直線に沿って色を混合する線形グラデーション、中心点から円形に外側へ広がる放射状グラデーション、カラーホイールのように中心点の周りに色を回転させる円錐グラデーションです。
Saved Presets is a Supporter feature.
Tool History is a Supporter feature.
Tool Notes is a Supporter feature.
