近年見かける機会が多くなった、クールなグラデーションカラーを知りたいときに便利なサイトのまとめです。
いずれもあらかじめグラデーションカラーの一覧が用意されているので、それらから選んでカラーコードやCSSで実装するためのコードを確認することができ、さらにサイトによってはそれを自分好みに調整してからコード出力したり、デザインで使える素材でダウンロードできるようにもなっています。

uiGradients

uiGradients

ページ左右に配置されている矢印でカラーを切り替えていく他、もっと一覧化された状態で見たい場合は左上にある「Show all gradients」から確認でき、キーカラーを選んでフィルター表示にすることもできます。
カラーコードは画面中央上部に記載、その他のオプションについては画面右上にそれぞれ配置されており、角度変更(クリックの度に角度が変わります)・CSSコードの出力・JPG形式でのダウンロードができるようになっています。

CSS GEARS

CSS GEARS

各カードの下部にある数値をクリックすることでカラーコードをコピーでき、スライドを調整すれば特定の範囲内で調整もできるようになっています。
また、各カードにホバーするとアイコンが表示され、それぞれカラーコードの変更・CSSコードのコピー・Adobe XDとSketchで使用できる素材のダウンロードができます。

colorful gradients

colorful gradients

こちらもグラデーションカラーがズラッと並んでいますが、上で紹介したものとは違ってCSSコードの出力や素材ダウンロードのボタンも用意されておらず、単純にそれぞれを閲覧して色の使い方を参考にするという感じになっています。

WebGradients

WebGradients

任意のカラー調整などはできませんが180種類のグラデーションが一覧化されており、カラーコードの確認・CSSコードのコピー・PNG形式でのダウンロードが可能になっています。
また、これらのグラデーションをPhotoshopやSketchで利用できる素材も配布されています。

Eggradients

Eggradients

200種類以上のグラデーションが一覧化されており、カラーコードの確認・CSSコードのコピーが可能になっています。

GradPad

GradPad

画面内に配置されている要素を動かすことで、任意のカラー・角度・間隔のグラデーションを作ることができるジェネレータです。
作成したものはページ上部にある「Get CSS for this Gradient」からCSSコードを確認できるようになっており、ベースとなるグラデーションを選択したい場合は横にある「Gradient Gallery」から選ぶことができます。

Gradient by ShapeFactory

Gradient by ShapeFactory

ズラッと一覧化されており、画面左にあるパレットアイコンでキーカラーでのフィルター表示に、その上にある2つの項目はサークル内をドラッグすることで色素と明るさを調整できます。
それぞれのグラデーションはホバーするとクリックでコピーできるカラーコードとCSSコードが表示される他、中央には角度調整を行える要素が表示されます。
また、クリックすることで選択したグラデーションが画面いっぱいに広がるのですが、その際に右上に表示される「More Actions」からSVG形式やSketchのパレットがダウンロードができるようになっており、さらに選択したカラーを「Pigment」や「Duotone」など作者が公開している別のツールで利用できるようにもなっています。

CoolHue 2.0

CoolHue 2.0

60種類のグラデーションが一覧化されており、カラーコードの確認・CSSコードのコピー・PNG形式でのダウンロードが可能になっています。

Gradient Hunt

Gradient Hunt

一覧上でCSSコードのコピーができ、詳細ページにいけばPNG形式でのダウンロードも可能になっています。
ページ上部に用意されているナビゲーションから「Linear」や「Radial」などタイプで絞り込むことが可能で、有償ではありますがこれらのグラデーションカラーをPhotoshopで使用できるパレットもダウンロードできます。

Grabient

Grabient

あらかじめ表示されているものだけでなく、それをベースにカラー変更(追加・削除も可能)をはじめ、角度や割合など任意で調整可能になっており、実装に必要なCSSコードもコピーできます。
CSSはプレフィックス付きで出力させたければページ上部にある「Prefixes」にチェックを入れてからCSSコピーをしてください。
また、これらをSketchで扱いやすくする素材も用意されています。

Free Mesh Gradient Collection

Free Mesh Gradient Collection

これまで紹介したタイプとは異なるグラデーションで、JPG形式でのダウンロードができるようになっています。
Sketch, Illustrator, PNGなど他の形式も欲しい場合はメールアドレスが必要になります。

Gradient Magic

Gradient Magic

シンプルなものも一部ありますがこちらも基本的にユニークなものが集められているサイトで、正確にはグラデーションというよりCSSのlinear-gradient()radial-gradient()を用いて様々な見栄えを表現できるCSSコードをコピーできるようになっています。
用意されているものをベースにカラー追加・削除を行ったり角度を変更ができるので、任意の見栄えにすることも可能です。