CSSグラデーションジェネレーター
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
なぜビジュアルグラデーションジェネレーターを使うのか？
CSSグラデーションを手動で記述するのは大変です。当ビジュアルジェネレーターではカラーピッカーとポジションスライダーを使ってカラーストップを制御でき、即座に更新されるリアルタイムプレビューで作成が速く直感的になります。
3種類のグラデーション
線形、放射状、円錐グラデーション — 各タイプに専用のコントロール付き
多色グラデーション
無制限のカラーストップを追加し、複雑なグラデーション用にポジションをドラッグ
リアルタイムプレビュー
色、ポジション、角度を調整するたびにグラデーションのレンダリングをリアルタイムで確認
3ステップでCSSグラデーションを作成する方法
グラデーションタイプを選択
線形、放射状、または円錐グラデーションを選択し、角度や方向を調整
カラーストップを調整
カラーピッカーで各ストップの色を設定し、スライダーでポジションを指定
CSSをコピー
「CSSをコピー」をクリックしてスタイルシートに使用できる完全なbackgroundプロパティを取得
CSSグラデーションのユースケース
ヒーローセクションの背景
対角線またはラジアルグラデーションで印象的な全画面背景を作成
グラデーションテキスト
background-clip: textでテキストにグラデーションを適用して驚くべきタイポグラフィ効果を実現
グラデーション境界線
border-imageでグラデーションを使用して要素のカラフルなフレームを作成
画像オーバーレイ
画像にグラデーションを重ねて暗いオーバーレイを作成してテキストの読みやすさを確保
CSSグラデーションのベストプラクティス
✓ 対角グラデーションに135degを使用
135度の角度は左上から右下へのクラシックな対角線を作成します — ヒーローセクションの人気の選択肢です。
✓ UIでグラデーションを控えめに
ボタンやカードなどのUI要素では、10〜20%の明度差で非常に控えめなグラデーションを使用して視覚的なうるさみなく深みを加えてください。
✓ フォールバックカラーを提供
グラデーションの前にsolidの背景色をフォールバックとして追加してください：background-color: #6366f1; background: linear-gradient(...).
✓ グラデーションポジションをアニメーション
CSSグラデーションを直接アニメーションはできませんが、より大きなグラデーションのbackground-positionをアニメーションすることでスムーズな動きの効果を作れます。
❓ よくある質問
線形、放射状、円錐グラデーションの違いは何ですか？
線形グラデーションは直線に沿って角度で遷移します。放射状は中心点から円形または楕円形に放射します。円錐は中心点の周りを回ります — 円形プログレスやカラーホイールに最適です。
透明なグラデーションはどのように作成しますか？
transparentをカラーストップとして使用します：linear-gradient(to bottom, rgba(0,0,0,0.8), transparent)。これにより半透明の色から完全透明へのグラデーションが作られ — 画像オーバーレイに最適です。
なぜグラデーションにバンディングが見えるのですか？
バンディング（色の間の目に見えるライン）は低品質ディスプレイや似たような影の間での遷移時に発生します。遷移を滑らかにするために中間のカラーストップを追加してください。
グラデーションをボーダーとして使用できますか？
はい、border-image: linear-gradient(...) 1を使用してください。これはグラデーションをボーダー画像として設定します。代わりに::before擬似要素をグラデーション背景と負のz-indexで使用してグラデーションボーダーをシミュレートすることもできます。