グラデーションジェネレーターの概要と基本機能
グラデーションジェネレーターは、直感的な操作でCSSグラデーションを作成できるオンラインツールです。グラデーションの種類を選択し、方向や形状を調整しながら、最大8個までのカラー分岐点を追加して好みのデザインを構築できます。
ツール上での変更はリアルタイムでプレビューに反映されるため、視覚的に確認しながら作業を進めることが可能です。完成したグラデーションのCSSコードは、ワンクリックで簡単にコピーしてWebデザインに活用できます。
選択可能なグラデーションの種類と特徴
このツールでは、以下の3種類のグラデーションを作成できます。
- 線形（Linear）: 直線に沿って色が滑らかに変化するグラデーションです。角度を設定することで、色の変化する方向を自由にコントロールできます。
- 円形（Radial）: 中心から外側に向かって、放射状に色が広がるグラデーションです。
- 扇形（Conic）: 中心点を軸として、色相環のように時計回りに色が変化するグラデーションです。
角度と形状による方向の制御
グラデーションの方向や広がり方は、選択した種類に応じて以下のように調整します。
- 角度の設定: 「線形（Linear）」または「扇形（Conic）」グラデーションでは、角度スライダーを用いて方向を設定します。0°は上方向、90°は右方向を指します。
- 形状の選択: 「円形（Radial）」グラデーションには角度の設定がありません。代わりに、形状として「楕円」または「正円」のいずれかを選択して色の広がり方を決定します。
カラー分岐点の詳細と配置ルール
グラデーションの色彩設計において、カラー分岐点は重要な役割を果たします。
- 初期状態: ツール起動時の初期グラデーションには、
#6366f1 0%と#ec4899 100%の2つのカラー分岐点が設定されています。 - 位置の概念: 各カラー分岐点は、グラデーションの開始点である0%から終了点である100%までの間の特定の位置に色を固定します。
- 分岐点の追加: 「カラー分岐点を追加」ボタンを押すことで、最大8個まで分岐点を増やすことができます。新しく追加されたカラー分岐点は、デフォルトで50%の位置に配置されます。
- 上限時の挙動: カラー分岐点が上限の8個に達すると、「カラー分岐点を追加」ボタンは無効化（クリック不可）されます。
CSSコードの出力とコピー
作成されたグラデーションは、即座にCSSコードとして生成されます。
「CSSをコピー」ボタンをクリックすると、生成されたCSSコードがクリップボードにコピーされます。コピーが完了すると、ボタンの表示が「コピーされました」へと切り替わり、操作が成功したことを視覚的に確認できます。
プライバシーとデータ処理について
当ツールでは、ユーザーのプライバシーを尊重した処理を行っています。すべてのグラデーションのレンダリング処理はお使いのブラウザ上で行われます。ツール内で設定したデータやカラー情報が、外部のBroBroGoにアップロードされることはありません。
よくある質問（FAQ）
線形、円形、扇形グラデーションの違いは何ですか？
線形（linear）は指定した角度の直線に沿って色が変化します。円形（radial）は中心から外側に向かって、正円または楕円状に色が広がります。扇形（conic）は色相環のように、中心点を軸に時計回りに色が変化します。
カラー分岐点（color stop）とは何ですか？
カラー分岐点（color stop）とは、グラデーション上の特定の位置（開始点の0%から終了点の100%まで）に固定された色のことです。分岐点を移動させて色のピーク位置を調整したり、分岐点を追加してより複雑なグラデーションを作成したりできます。最大8個まで使用可能です。
グラデーションの方向はどのように制御しますか？
線形（linear）または扇形（conic）グラデーションでは、角度スライダーで方向を設定します。0°は上方向、90°は右方向を指します。円形（radial）グラデーションには角度の概念がないため、代わりに「正円（circle）」または「楕円（ellipse）」の形状を選択して広がり方を調整します。