グラデーション生成

グラデーションを作る手順

1. 2色を選ぶ。それぞれの色見本をクリックして、グラデーションの始まりと終わりの色を指定します。
2. 線形か放射かを選ぶ。線形は直線に沿って色が変化し、放射は中心から外側へ広がります。
3. 角度を決める。スライダーで線形グラデーションの向きを変えられます。プレビューが即座に反映されます。
4. CSSをコピーする。操作パネルの下に生成されたコードが表示されるので、「CSSをコピー」で取得してスタイルシートに貼り付けてください。

このツールでできること

グラデーションのCSSを手で書くと、結果を想像しながら書いてはリロードして確認する、という往復になりがちです。このツールなら調整しながら実際の見え方を大きなサイズで確認でき、そのまま貼り付けられるCSSが手に入ります。メインビジュアル、ボタン、カードの背景、文字の下に敷くオーバーレイなどに使えます。

処理はすべてブラウザ内で完結します。インストールも会員登録も不要です。

きれいなグラデーションを作るコツ

いちばん多い失敗が、中間に濁った帯が出てしまうことです。これは色相環で離れた2色（青とオレンジなど）を選んだときに起こります。2色を混ぜる経路が、その間にある彩度の低いグレーを通過するためです。近い色どうしを選べば変化はずっとなめらかになるので、グラデーションには補色よりも類似色の組み合わせが向いています。どうしても離れた色を使いたい場合は、あいだに中間色を挟んで経路を指定すると濁りを避けられます。

向きについても触れておきます。CSSの角度は0度が上向きで、時計回りに増えていきます。つまり90度が左から右へ、180度が上から下へです。数学の角度の取り方とは違うため間違えやすいところで、プレビューを見ながら決めるのが確実です。なお放射グラデーションでは角度は効きません。中心から全方向に広がるため、向きが1つに定まらないからです。最後にもうひとつ。グラデーションの上に文字を置くなら、コントラストチェッカーで両端の色それぞれとの組み合わせを確認してください。片方の端では読めても、もう片方では読めないということがよくあります。

よくある質問