CSSグラデーションジェネレーター
このツールとは CSSグラデーションジェネレーター
CSSグラデーションジェネレーターは、リニア（線形）またはラジアル（放射状）グラデーションを視覚的に作成し、そのままコピーできるCSSコードを出力するツールです。グラデーションの種類を選び、リニアなら角度、ラジアルなら形状と位置を設定し、必要なだけカラーストップを追加してそれぞれを好きな位置に配置できます。プレビューは即座に更新され、出力欄には常に貼り付け可能なbackground宣言が表示されます。
使い方
- グラデーションの種類としてリニアまたはラジアルを選びます。
- リニアの場合は角度スライダーを、ラジアルの場合は形状と位置を調整します。
- 各カラーストップの色と位置を設定し、カラーストップを追加ボタンでさらに追加します。
- 出力欄に生成されたCSSをコピーし、スタイルシートに貼り付けます。
こんなときに便利
ヒーローセクションを作っていて、青からピンクへの滑らかな背景が必要ですか。0%と100%に2つのストップを設定し、角度を選べば、background: linear-gradient(90deg, #3B82F6 0%, #EC4899 100%); がそのままCSSに使えます。カードのオーバーレイやボタンのホバー状態、ロゴの背後のラジアルな輝きにも同様に便利で、devtoolsでグラデーションの構文を手作業で調整する必要はありません。
よくある質問
リニアグラデーションとラジアルグラデーションの違いは何ですか？
リニアグラデーションは固定角度の直線に沿って色が変化します。オレンジから紫へ移り変わる夕焼けのようなイメージです。ラジアルグラデーションは中心点から円形または楕円形に外側へ色が変化し、スポットライトや光の輪のような効果になります。
カラーストップはいくつまで追加できますか？
いくつでも追加できます。グラデーションを表示するには最低2つのストップが必要で、カラーストップを追加ボタンでさらに増やせば、虹やブランドカラーのような多色の変化も作れます。
各ストップの位置パーセントは何を意味しますか？
位置は、その色がグラデーション上で最も強く現れる場所を示します。0%が始点、100%が終点です。ストップの位置を動かすと、その色が優勢になる場所や隣接する色との混ざり方が変わります。
生成されたCSSはすべてのブラウザで動作しますか？
はい。linear-gradient()とradial-gradient()は標準のCSS関数で、すべてのモダンブラウザでベンダープレフィックスなしにサポートされています。
作成したグラデーションを入力済みの状態で共有できますか？
はい。グラデーションを作成すると、URLが自動的に更新されます。アドレスバーからコピーするか共有ボタンを使えば、リンクを開いた人にも同じグラデーションが表示されます。