CSSグラデーションジェネレーター
美しいグラデーションをデザインし、すぐに使えるCSSコードを取得
グラデーションコントロール
ライブプレビュー
CSS出力
使用例
暖色グラデーション
日の出のオレンジから夕焼けのピンクに移行する美しい暖色グラデーション。
オーシャングラデーション
深い青からターコイズへの海にインスパイアされたクールなグラデーション。
ラジアルグロー
中心からスポットライトまたはグロー効果を作成するラジアルグラデーション。
機能
複数のグラデーションタイプ
方向と位置を完全に制御してリニア、ラジアル、コニックグラデーションを作成
ライブビジュアルプレビュー
色、ストップ、角度、位置を調整するとグラデーションがリアルタイムで更新
複数のカラーストップ
複雑で美しいグラデーションのために位置制御付きの無制限のカラーストップを追加
プライバシー優先
すべてブラウザ内で実行 — データはサーバーに送信されません
使い方
タイプと色を選択
グラデーションタイプ（リニア、ラジアル、コニック）を選択し、カラーピッカーでカラーストップを追加します。
方向を調整
リニアグラデーションには角度スライダー、ラジアルとコニックタイプには位置コントロールを使用します。
CSSをコピー
CSSコピーボタンをクリックして、生成されたグラデーションコードをクリップボードにコピーします。
よくある質問
CSSグラデーションジェネレーターとは？
CSSグラデーションジェネレーターを使えば、構文を覚えなくてもグラデーション背景を視覚的にデザインできます。グラデーションタイプ（リニア、ラジアル、コニック）を選び、カラーストップを追加し、角度や位置を調整すると、プロジェクトにそのまま貼り付けられるクリーンなCSSが生成されます。
主な機能
3種類のCSSグラデーションタイプを1つのツールで。ドラッグで移動できる無制限のカラーストップ。リニア用の角度スライダーとラジアル/コニック用の位置コントロール。素早く始められる美しいプリセット。生成されるCSSには古いブラウザ用の-webkitプレフィックスが含まれます。
よくある使用例
ヒーローセクションの背景、ボタンのホバー状態、カードのオーバーレイ、装飾的なボーダー。ラジアルグラデーションはスポットライト効果に、コニックグラデーションはカラーホイールや円グラフ風のビジュアルに最適です。
ヒント
クリーンなデザインには2〜3色に抑えましょう。類似色（カラーホイールの隣同士）を使うと滑らかな遷移になります。控えめな背景には、非常に近い2つの色調間のグラデーションを試してください。明るい背景と暗い背景の両方で必ず確認しましょう。
プライバシー
すべてブラウザ内で動作します。色も設定も何もアップロードされません。