CSSグラデーションジェネレーター
複数のカラーストップで線形・放射状・円錐状のCSSグラデーションを作成し、コードをコピーできます。
プレビュー
CSS出力
background: —;
すべてブラウザ内で動作します — アップロードも登録も不要です。
グラデーションの種類
deg
deg
カラーストップ
バーをクリックしてストップを追加、ドラッグで移動
選択中のストップ
ストップの色
100%
%
プリセット
CSSグラデーションジェネレーターについて
CSS Gradient Generatorは、完全な視覚的コントロールでlinear、radial、conicのグラデーションを作成します。グラデーションバーをクリックしてカラーストップを追加し、ドラッグして位置を変え、各ストップに色、不透明度、位置を個別に設定できます。linearグラデーションには角度の指定が、radialには形状(circleまたはellipse)と位置が、conicには開始角度が用意されています。
ライブプレビューはブラウザが実際にどう描画するかをそのまま表示し、真っさらなキャンバスではなく手早く出発点が欲しいときのために、ランダム化ボタンと厳選されたプリセットも用意されています。ストップは自由に追加・削除でき、グラデーションには最低2つあれば十分です。
見た目が決まったら、グラデーション値そのもの、または完全なCSSルールをコピーできます。このジェネレーターは完全にブラウザ内で動作し、アップロードも登録も不要なので、ボタン、ヒーローの背景、ボーダー、テキスト効果などに手軽に使えます。
CSSグラデーションジェネレーターの使い方
- グラデーションの種類を選びます。linear、radial、conicのいずれかです。
- 角度(linear)、形状と位置(radial)、または開始角度(conic)を設定します。
- グラデーションバーをクリックしてカラーストップを追加し、ドラッグして位置を調整します。
- 各ストップに色、不透明度、正確な位置を設定します。
- 手早くひらめきが欲しいときはプリセットやランダム化ボタンを試します。
- グラデーション値または完全なCSSルールをコピーします。
よくある質問
linearグラデーションは、角度をつけた直線に沿って色を混ぜ合わせます。radialグラデーションは中心点からcircleまたはellipseの形で外側に向かって広がります。conicグラデーションは中心点の周りを色が回転するように広がり、円グラフやカラーホイールの背後にあるのがこのタイプです。
最低2つで、実用上の上限はありません。2〜3個のストップできれいな背景ができ、間隔を詰めたストップはくっきりした色の帯を作り出します。これがストライプや区切られた効果を作る仕組みです。
はい。各ストップには個別の不透明度設定があります。不透明度0%のストップはグラデーションをフェードアウトさせ、これは色付きのオーバーレイを写真に馴染ませたり、ヒーローセクションをページ背景にフェードさせたりする際の標準的な方法です。
直接的にはできません。ブラウザはグラデーション値同士をトランジションできないためです。よく使われる工夫としては、大きめのグラデーション上でbackground-positionをアニメーションさせる、カスタムプロパティでconicグラデーションを回転させる、または2つの重なった要素をクロスフェードさせる、といった方法があります。
はい、無料で無制限に使えます。完全にブラウザ内で動作するため、デザインした内容が保存されたり送信されたりすることはありません。
人気の検索
CSS グラデーション ジェネレーター
linear-gradient CSS ジェネレーター
radial-gradient CSS
conic-gradient CSS
CSS 背景 グラデーション 作成
グラデーション カラーストップ ツール
CSS グラデーション 角度 設定
オンライン グラデーション ジェネレーター
お困りですか？
このツールで問題が見つかりましたか？チームにお知らせください。