今は画像じゃなくてもCSSでグラデーションを作れるようになったので、Webサイトでもグラデーションを使っているものが増えてきましたね。

でも自分で色を決めようとしても、なかなかうまくいかなかったり、綺麗な色合いにならない、ということもあると思います。

今日はそんな時に役立ちそうなWebサービスを見つけたのでご紹介します。

グラデーションをCSSとJPG画像で取得できるuiGradients

海外のサイトですがuiGradientsというWebサービスです。

https://uigradients.com/

uiGradients

画面いっぱいにグラデーションの表示ができるので見やすいです。一目でわかるように、上には使っている色のコードも書かれています。

基本は用意されたグラデーションから選ぶ仕様

github.comの中で自分でグラデーションを登録することができるようですが、基本は登録されたものの中から選んで使うほうが簡単だと思います。

左上にある「show all gradients」を選ぶと、登録されたグラデーションが一覧で見ることができます。これだけでも結構たくさんあるのですごく参考になると思います。

上に並んでいる色のパレットから、特定の色で絞り込みをすることもできます。緑系のグラデーションが見たかったら、緑のボタンを押すといった感じですね。

uiGradients グラデーション一覧

ずらずら〜っと並んでいるので好きなものを選べば同様にプレビューで確認できます。

向きを変更したりも可能

また右上にあるメニューからグラデーションの向きを変えたり、そのグラデーションのCSSやJPEG画像も取得できます。

気に入ったものがあればそのままCSSで使えるのも簡単でいいですね。

グラデーションって角度や向きを変えただけで印象が変わるのでその辺りも試してみると参考になると思います。

向きの変更などもできる

どんなグラデーションが良いのかわからなくて困っている人は、まずはこういったWebサービスを使ってグラデーションに慣れていってみてはどうでしょうか。きっと良いヒントになると思います。

気になる人はチェックしてみてください。

https://uigradients.com/