グラデーションジェネレーター

このツールについて

この CSS グラデーション作成ツールは、2 色または 3 色から線形・放射状・円錐グラデーションを作成し、ライブプレビューとそのまま使える background の CSS を表示します。

使い方

1. グラデーションの種類を linear、radial、conic から選びます。
2. スライダーで角度（0–360°）を設定します。
3. 2 色を選ぶか、「3 色を使う」にチェックを入れて 3 色目を追加します。
4. 「CSS をコピー」をクリックし、background のルールをスタイルシートに貼り付けます。

知っておきたいこと

• linear-gradient() は角度で指定した直線に沿って色を混ぜ、90deg で左から右へ変化します。
• radial-gradient(circle, …) は中心から外側に向かって色を広げます。
• conic-gradient(from <angle>, …) は中心点の周りを回るように色を変化させ、円グラフやカラーホイールに便利です。
• CSS グラデーションはブラウザが描画する画像なので、ファイルサイズを増やさずにどんなサイズにも拡大縮小できます。
• 3 つのグラデーション関数はいずれも、現在の主要ブラウザすべてで対応しています。

すべてブラウザ内で動作します。入力した内容がアップロード・保存されることはありません。

よくある質問