グラデーションジェネレーター

グラデーションジェネレーターを使えば、角度やストップ位置を推測しなくても目で見ながらCSSグラデーションを組み立てられます。linear・radial・conicから選び、カラーストップを追加・削除しながら各ストップの色や位置を調整すると、大きなプレビューボックスが即座に更新されます。

linear・radial・conicの3種類はそれぞれ何が違うのか

linearグラデーションは色を直線状にブレンドするもので、角度スライダーで方向を決めます。90度で左から右、180度で上から下に流れます。radialグラデーションは中心点から外側に向かってブレンドし、全方向に均等に広がる円と、要素の形に合わせて伸びる楕円のどちらかを選べます。conicグラデーションはカラーホイールやパイチャートのように中心点の周りを色が回転していくもので、こちらも角度を指定して回転の開始位置を決められます。どのタイプでも好きな数のカラーストップを追加でき、各ストップには色と0〜100%の位置がそれぞれ設定できるので、色を密集させることも均等に広げることもできます。

ゼロから作らず、既存の見た目から始められるか

始められます。このツールには、暖色系の2色linearグラデーション「Sunset」、radialの「Deep Space」、色相を一周するconicの「Rainbow Wheel」など、いくつかのプリセットが用意されています。プリセットを選ぶとそのままエディタに読み込まれるので、白紙から作る代わりに色やストップ、角度を調整していくだけで済みます。作った内容はlinear-gradient(90deg, #ff7e5f 0%, #feb47b 100%)のように、手で書くのとまったく同じCSSとして出力されるので、そのままスタイルシートに貼り付けられます。

作った内容はアップロードされるのか

されません。グラデーションの構築とプレビューはすべてブラウザ内で完結するので、作った内容が外部に出ることはありません。公開前のクライアントのブランドグラデーションや、自社製品の背景を安心して試作できます。

ヒーローセクション用のbackground: linear-gradient(...)の一行を作ったり、カードの背後に添える放射状の光、あるいはプログレスリングやカラーホイール用のconicグラデーションを作ったりするのに使えます。linear-gradient()、radial-gradient()、conic-gradient()の完全な構文はMDNのgradientリファレンスを参照してください。