なにかと使う機会が多いCSSのグラデーションですが、角度・カラーコード・%を入れて確認→調整…と繰り返すのは非常に手間が掛かるので、専用のWebサービスを使うのが手っ取り早いです。

今回紹介するのは『CSS Gradient』というCSSでグラデーションを作ることに特化したツールなので、Web制作のお供にどうぞ。

CSS Gradient

これもう使い方の説明必要ないですよね。

上部のバーで色の変化するポイントを指定してからカラーピッカーで色を選ぶと、上部のプレビューがリアルタイムで変化します。もちろんカラーコード（HEX,RGBA）を直接指定することも出来るので、どこかから適当に拾ってきた色を突っ込んでもOK。

ちなみに色の変化点は何個でも追加できるので、複雑な色合いのグラデーションを作るのも簡単です。

で、納得のいくグラデーションが出来上がったら下のテキストエリアに出力されているスタイルをコピーして、CSSに貼り付けましょう。

まとめ

ジェネレーターとして必要な機能はだいたい揃っているので、概ね不満はありません。

2色しか使わない簡単なグラデーションなら雰囲気で作れるんですが、複数色のグラデーションや、色の変化点を細かく指定するようなグラデーションの場合は出来上がりがイメージしにくいので、こういうWebツールを知っていると調整の手間が省けて非常に便利です。

色をコピーしやすいという理由で、透過を入れてないときはHEX値で出力したかったんですが…まぁ許容範囲です。

conic-gradientに関しては、市松模様作るときとか放射状のエフェクトを作りたいときくらいしか使い所がないので、これもOKですかね。

以上。