グラデーションジェネレーターとは？
CSSグラデーションをビジュアルで作成できるツールです。リニア・ラジアル・コニックの3種類に対応し、カラーストップを無制限に追加できます。角度、位置、色をリアルタイムで調整し、ワンクリックでCSSをコピーできます。
線形・放射・円錐のグラデーションから選び、角度を 0°〜360° で設定し、必要なだけカラーストップを追加できます。各ストップに不透明度を指定すれば透明なオーバーレイも作れます。サンセット、Instagram、オーシャンといった厳選プリセットから始めて色を微調整しましょう。放射グラデーションでは円か楕円の形状と範囲キーワードを選べ、混色を OKLab や OKLCH に切り替えてより滑らかな最新の補間にしたり、イージングカーブを適用したりできます。「アニメーション」をオンにすると、そのまま貼り付けられる @keyframes ループが手に入り、動く背景を作れます。出力はそのまま CSS なので、スタイルシートや Tailwind 設定、デザインツールに貼り付けるだけです。
使い方
- ステップ1 — グラデーションの種類（リニア・ラジアル・コニック）を選び、角度スライダーまたはプリセットボタンで方向や角度を設定します。
- ステップ2 — グラデーションバーをクリックしてカラーストップを追加します。各ストップの色と位置はドラッグまたは直接入力で調整できます。
- ステップ3 — グラデーションのプレビューをリアルタイムで確認し、生成されたCSSコードをクリップボードにコピーするか、CSSファイルとしてダウンロードします。
使用するタイミング
- Photoshopを開かずに、ヒーローセクションやボタン、カード背景を作る場面。
- ウェブ、メール、プレゼン資料でブランドカラーを統一する場面。
- 開発者に仕様を渡す前にCSSの見え方を試したいとき。
結果
夕焼け風のヒーロー背景を作りたいとします。135°のリニアグラデーションを選び、0%にオレンジ、50%にローズ、100%にパープルを置いて、CSSをスタイルシートに貼り付けるだけです。
よくある質問
- 線形、円形、円錐グラデーションの違いは?
- 線形は指定角度の直線に沿って色が変化します。円形は中心から外側へ広がる、太陽光のようなパターン。円錐は中心点を軸にぐるりと回転する形で、円グラフやカラーホイールに向いています。
- カラーストップは何個まで追加できますか?
- 上限はありません。実務では2〜4個で済むことがほとんどです。5〜6個を超えると色が混ざり合って濁った印象になり、本来求めていたはっきりしたグラデーションが失われます。
- 暗い背景でバンディング(縞模様)が出るのはなぜ?
- 隣り合う色の明度が近いとバンディングが出やすくなります。ストップ間のコントラストを上げる、色の補間を OKLCH または OKLab(知覚的)に切り替える、CSS で薄いノイズを重ねる、のいずれかが効果的です。
- このグラデーションをFigmaやSketchで使えますか?
- CSS自体はそのまま貼れませんが、色の値と位置のパーセンテージは1対1で対応します。各ストップのhex値と位置をデザインツールのグラデーションエディタに入力すれば再現できます。
- 角度パラメータは具体的に何を決めるの?
- 線形では0°が上方向で、時計回りに回転します。90°なら左から右、180°なら上から下です。円錐では、円周上のどの位置から色の回転が始まるかを決めます。