CSSグラデーションジェネレーターとは？
CSSグラデーションジェネレーターは、リニア・ラジアル・コニックグラデーションを視覚的にデザインし、対応するCSSコードを即座に生成するツールです。グラデーション構文を手書きする代わりに、色・位置・角度をインタラクティブに調整し、生成されたコードをそのままスタイルシートにコピーできます。
使い方
- カラーピッカーで2色を選び、グラデーションの種類（リニア・ラジアル・コニック）を選択し、スライダーで角度を調整します。
- 変更に応じてグラデーションのプレビューとCSSコードがリアルタイムで更新されます。
- 「ランダム」でランダムな色の組み合わせを生成するか、「CSSをコピー」で生成されたコードをコピーします。
基礎知識
CSSグラデーションは、画像を使わずにブラウザがネイティブに描画する2色以上のスムーズな色遷移です。リニアグラデーションは指定した角度で直線的に色が変化します。ラジアルグラデーションは中心から外側へ円形または楕円形に広がります。カラーストップは各色の配置位置を定義し、ストップの位置を調整することで色の混ざり具合を制御できます。
よくある質問
色はいくつ使えますか？
本ツールは2色のカラーストップをサポートしています。シンプルな2色グラデーションで最も一般的なユースケースをカバーします。生成されたCSSコードを直接編集して、さらにカラーストップを追加することも可能です。
生成されたCSSコードはすべてのブラウザで動作しますか？
はい。最新のCSSグラデーションはChrome、Firefox、Safari、Edgeなどすべての主要ブラウザでサポートされています。ベンダープレフィックスなしの標準構文で生成されます。
透明なグラデーションも作成できますか？
はい。カラーストップのアルファチャンネルを調整することで、透明や半透明の領域を作成できます。オーバーレイ効果や背景へのフェードに便利です。