キレイな配色の参考に!流行りのグラデが簡単に作れるCSSグラデーションカラーライブラリ10選【サンプル豊富/コピペ自由】2018年度決定版

最近流行りのCSSで作るグラデーションデザイン。
盛り上がっているスタートアップ系の企業は大抵グラデーションを使用しているイメージがあります。
最先端のようなイメージがついてオシャレですよね。

本日はそんなキレイなグラデーションが簡単にCSSで書ける、グラデーションライブラリをご紹介します。
モバイルサイトやアプリのUIデザインをされている方、必見です。

WebGradients

f:id:mamegoro:20180418132337j:plain

180種類以上のオプションがあるグラデーションライブラリ。

CSS3のコードとしてのダウンロードはもちろん、グラデーションのダウンロードがPSDとスケッチでも可能。

UIも分かりやすく、コピーがクリック1つで出来るのでお手軽に使用ができます。

Gradient Buttons

f:id:mamegoro:20180418132347j:plain

ボタングラデに特化したライブラリ。

既に用意されているclassを使用するだけでキレイなグラデが作る事が出来ます。

uiGradients

f:id:mamegoro:20180418132355j:plain

UIが体感的に分かりやすく、使いやすいグラデーション作成ツール。

予め用意されたライブラリの選択も出来ますし、自分で指定したグラデーションを簡単に作ることも可能。

筆者個人的には一番オススメのサイトです。

Gradient Animator

f:id:mamegoro:20180418132411j:plain

色の指定はもちろん、方向の指定やグラデーションの速度など細かくかつ簡単に設定出来るツール。

リアルタイムで横にCSSとして吐き出されるので分かりやすいです。

Colorzilla Gradient Editor

f:id:mamegoro:20180418132419j:plain

フォトショップのグラデーション設定のようなイメージで使用出来るツール。
UIはイケていないが、機能自体はすごく分かりやすく高機能。

16進数やRGBなど様々なフォーマットでカラーコードをアウトプット出来るのが特徴。

CSS Gradients

f:id:mamegoro:20180418132429j:plain

GitHubで利用できるCSS3グラデーションライブラリー。
これまでご紹介してきた普通のグラデーションだけではなく、CSSだけで模様をつけたデザインなどもある。

サンプルの色は正直微妙ですが、カスタマイズすれば活用できる幅は広がりそう。

※デモページはこちら:CSS3 Gradients

ColorSpace Gradient

f:id:mamegoro:20180418132438j:plain

Colorzillaと同じような機能ですが、より分かりやすいインターフェース。

ただ、1度に2つの色しか指定が出来ないため、シンプルなグラデーションを作りたいという方にオススメです。

Infinite Gradients

f:id:mamegoro:20180418132447j:plain

ものすごく細かくグラデーションを設定出来るツール。

上部のナビゲーションバーを使い、色の追加や動きなどをロックし細かいグラデーションを作成する事ができます。

操作が少し分かりにくいですが、より複雑なデザインを作りたいという方にオススメです。

Conic Gradient Polyfill

f:id:mamegoro:20180418132457j:plain

円錐のようなイメージでグラデーションを作れるライブラリ。

CSSのconic-gradientが対応していないブラウザがあるので、使用する場合は注意が必要。

TinyGradient

f:id:mamegoro:20180418132506j:plain

今回紹介する中で唯一のJSライブラリです。

JSでグラデーションを操作、指定をしておくと全てのブラウザで最適化されたグラデーションCSSが表示されます。

こちらも16進数、RGBでカラーコードを設定することが出来ます。

まとめ

いかがでしたでしょうか。
流行りのグラデーションデザイン。
中々自分では思ったように指定が出来ないので、少しでも時間を短縮出来るよう今回紹介したようなライブラリやツールを駆使しましょう。


※詳しい利用規約は各サイトでご確認ください。