クールなグラデーションのカラーコードやCSSコードを確認できるサイト 5

クールなグラデーションのカラーコードやCSSコードを確認できるサイト 5

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

uiGradients

uiGradients

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

CSS GEARS

CSS GEARS

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

WebGradients

WebGradients

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

GradPad

GradPad

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

Gradient by ShapeFactory

Gradient by ShapeFactory

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

Close the search window,
please press close button or esc key.