高さ: 200px
カラー
設定
CSS
サンプルギャラリー
サンプルをクリックするとジェネレーターに反映されます。お好みのスタイルからカスタマイズを始めましょう。
CSSグラデーションジェネレーターの使い方
1. グラデーションタイプの選択
まずは作成したいグラデーションのタイプを選択します。3種類のグラデーションタイプから、目的に合ったものを選びましょう。
- Linear（線形）：最も一般的な直線的グラデーション。角度を指定して方向を制御
- Radial（放射状）：中心から外側に広がるグラデーション。円形や楕円形で表現
- Conic（円錐）：角度に沿って回転するグラデーション。カラーホイールのような効果
2. カラーの設定
グラデーションを構成する色を追加・編集します。
- カラーピッカーで色を選択、または16進数カラーコードを直接入力
- 透明度（アルファ値）をスライダーで0〜100%の範囲で調整
- 色の位置をスライダーで調整し、グラデーションを制御
- 「カラー追加」ボタンで3色以上の複雑なグラデーションも作成可能
- 不要な色は「×」ボタンで削除（最低2色は必要です）
3. 詳細設定のカスタマイズ
選択したグラデーションタイプに応じて、さらに詳細な設定が可能です。微調整を行うことで、理想のグラデーション効果を実現できます。
- Linear：角度（0〜360度）で方向を制御
- Radial：形状（円形/楕円）、サイズ、位置を選択
- Conic：開始角度と中心位置を設定
- 「繰り返しグラデーション」オプションで、パターン効果も作成可能
- プレビュー領域の高さを調整して、グラデーションの見た目を確認
4. サンプルギャラリーの活用
まずは、サンプルギャラリーを試してみてください。サンプルを元に、自分好みにカスタマイズするのもアリです。
- 現在公開している60種類以上のグラデーションサンプルから選択
- サンプルをクリックすると、即座にジェネレーターに反映
- 読み込んだサンプルをベースに、色や設定を微調整してオリジナルのグラデーションを作成
5. CSSコードの取得と実装
完成したグラデーションのCSSコードを取得して、Webサイトに実装しましょう。コピー＆ペーストで簡単に使用できます。
- 自動生成されたCSSコードをリアルタイムで確認
- 「コピー」ボタンをクリックして、ワンクリックでクリップボードにコピー
- 取得したCSSコードは、そのままスタイルシートに貼り付けて使用可能
- backgroundプロパティで指定されているので、どの要素にも簡単に適用可能
