CSSグラデーション ジェネレーター

使い方

1. グラデーションタイプ（線形・放射状）を選択します。
2. 線形グラデーションの場合、角度を調整して方向を設定します。
3. カラーストップを追加・削除・変更してグラデーションをカスタマイズします。
4. 各ストップには色と位置（0-100%）を設定できます。
5. コピーボタンで生成されたCSSをコピーできます。

CSSグラデーションとは

CSSグラデーションは、2つ以上の色の間の滑らかな遷移を表示します。線形グラデーションは指定した角度に沿って直線的に、放射状グラデーションは中心点から外側に向かって色が変化します。背景、ボタン、オーバーレイ、装飾効果に広く使われています。

グラデーションの種類

• 線形グラデーション：角度で定義された直線に沿って色が遷移します（0deg=下から上、90deg=左から右、135deg=左上から右下）。
• 放射状グラデーション：中心点から外側に向かって円形または楕円形に色が遷移します。

活用例

• 目を引くページ背景やヒーローセクションの作成。
• モダンで洗練された印象を与えるボタンのグラデーション塗り。
• 半透明のグラデーションを使った画像上のテキストオーバーレイ。
• 滑らかな色遷移によるカードのホバーエフェクト。
• 装飾的な区切り線やセクション間の仕切りのデザイン。
• グラデーションベースのローディングインジケーターやプログレスバーの作成。

グラデーションデザインのコツ

• 近い色相で控えめなグラデーションを作ると、プロフェッショナルで落ち着いた印象になります。
• 異なる画面サイズや輝度でテストし、どの環境でも美しく見えるか確認しましょう。
• 透明度のある色（rgbaやhsla）を組み合わせると、画像や他の背景の上に重ねるレイヤー効果を演出できます。
• カラーストップは2〜3個に抑えると、すっきりとした読みやすいグラデーションになります。
• 135degや45degの斜めグラデーションは、奥行きのあるビジュアル効果を生み出します。

プライバシー

すべての処理はブラウザ内で完結します。データがサーバーに送信されることはありません。