CSS Gradient Generator

ビジュアルエディターで美しいCSS グラデーションを作成。色を選択してアングルを調整し、CSS コードをコピー。すべてブラウザで完結します。

動作方法: グラデーションタイプを選択し、色とアングルを調整してCSS をコピー。プレビューはリアルタイムで更新されます。任意のColor Stopをクリックして色または位置を変更。データはサーバーに送信されません。

0°90°180°270°360°
0%
100%
background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);

CSS Gradientについて

CSS Gradientはブラウザがレンダリングする複数の色の滑らかな遷移です。background-imageプロパティとgradient関数を使って作成されます。グラデーションは背景、ボーダー、テキストエフェクト、装飾要素に使用できます。画像ファイルと異なり、CSS Gradientは解像度に依存せず、軽量で、トランジションでアニメーション可能です。

Linear GradientとRadial Gradient

Linear Gradientは角度または方向（例：to right、45deg）で定義された直線に沿って色を遷移させます。Radial Gradientは中心点から円形または楕円形で色を放射状に遷移させます。Linear Gradientは背景やセクション区切りに最適で、Radial Gradientはスポットライト効果や円形の装飾に適しています。

Color Stopsの設定

Color Stopはグラデーション内での色の表示位置を定義します。各Stopには色値と任意の位置（パーセンテージまたは長さ）があります。複数のStopを追加して複雑な多色グラデーションを作成できます。位置によって色が完全に適用される場所が決まり、ブラウザはStop間を滑らかに補間します。同じ位置のStopは硬い色境界を作成します。

グラデーション設計のベストプラクティス

  • クリーンで洗練されたグラデーションには2～3つのColor Stopを使用
  • 控え目なグラデーションには類似色を選択
  • 大胆で目立つ効果には補色を使用
  • 明るい背景と暗い背景の両方でテスト
  • 旧ブラウザ対応のため背景色をフォールバックとして設定
  • CSS カスタムプロパティで再利用可能なグラデームテーマを管理