CSSグラデーションジェネレーター
美しいCSSグラデーションを視覚的に作成・カスタマイズできます。線形・円形グラデーション対応、プリセット機能付きでWebデザインを効率化します。
プレビュー
CSS
/* Fallback for older browsers */
background-color: #4f46e5;
/* Modern gradient */
background: linear-gradient(90deg, #4f46e5 0%, #06b6d4 100%);グラデーション
使い方
- STEP 1
- 上部のプレビューエリアでリアルタイムに結果を確認しながら作業できます。
- STEP 2
- グラデーションタイプ（線形・円形）を選択し、角度や形状を調整します。
- STEP 3
- プリセットボタンから人気の配色を選ぶか、カラーストップを手動で編集します。
- STEP 4
- カラーストップの色をクリックして変更し、スライダーで位置を調整します。
- STEP 5
- 「色追加」ボタンで新しいカラーストップを追加できます（最低2色必要）。
- STEP 6
- 完成したら「コードコピー」ボタンでCSSコードをクリップボードにコピーします。
注意事項
- 古いブラウザ（IE11以前）ではグラデーションが正しく表示されない場合があります。
- 複雑なグラデーション（多数のカラーストップ）は描画パフォーマンスに影響する場合があります。
- 生成されたCSSコードは自由にカスタマイズしてご利用ください。
- モバイルデバイスでは、複雑なグラデーションがバッテリー消費に影響する場合があります。
豆知識
線形グラデーションの角度は0度が上向き、90度が右向きです。時計回りに角度が増加します。
円形グラデーションは中心から外側に向かって色が変化し、背景全体を美しく彩ります。
同系色を使ったグラデーションは上品で落ち着いた印象を与えます。
補色（色相環で対極にある色）を使うと、鮮やかで印象的なグラデーションになります。
カラーストップの位置を調整することで、グラデーションの変化の仕方をコントロールできます。
透明度（alpha値）を含む色を使用する場合は、rgba()やhsla()形式で指定してください。
Webデザインでは、テキストの可読性を考慮してコントラストを適切に保ちましょう。
グラデーションは背景だけでなく、ボーダーやテキストにも適用できます。
よくある質問
QUESTION 1
線形と円形グラデーションの違いは？
線形グラデーションは直線的に色が変化し、円形グラデーションは中心から外側に向かって放射状に色が変化します。線形は方向性があり、円形は中心点から均等に広がります。
QUESTION 2
カラーストップとは何ですか？
グラデーション上の特定の位置に配置される色のポイントです。位置は0%（開始点）から100%（終了点）で指定し、複数のカラーストップを組み合わせて複雑なグラデーションを作成できます。
QUESTION 3
生成したCSSはどこで使える？
WebサイトのCSS、HTML要素のstyle属性、CSS-in-JSライブラリ、Sass/SCSSファイルなど、あらゆる場面で使用できます。商用利用も可能です。
QUESTION 4
プリセットの色を変更できますか？
プリセットを選択した後、カラーストップの色や位置を自由に変更できます。プリセットは出発点として使用し、お好みに合わせてカスタマイズしてください。
QUESTION 5
グラデーションが表示されない場合は？
古いブラウザ（IE11以前）では対応していません。また、CSSの記述に誤りがないか確認してください。background-imageプロパティとして使用する場合もあります。
QUESTION 6
角度の指定方法を教えてください
0度は上向き（12時方向）、90度は右向き（3時方向）、180度は下向き（6時方向）、270度は左向き（9時方向）です。時計回りに角度が増加します。
QUESTION 7
透明なグラデーションは作れますか？
はい。カラーピッカーで色を選択後、CSSコードを手動でrgba()形式に変更することで透明度を指定できます。例：rgba(255, 0, 0, 0.5)は50%透明の赤色です。
QUESTION 8
レスポンシブデザインでの注意点は？
モバイルデバイスでは複雑なグラデーションがパフォーマンスに影響する場合があります。シンプルなグラデーションを使用するか、メディアクエリで調整することをお勧めします。