グラデーション関連のカラーツールまとめ

gradation-2

こんにちは、デザイナー・ブロガーの
ゆっきー(@elcielo_design)です。

この記事では、グラデーション関連の
無料カラーツールをまとめています。
(CSSグラデーションジェネレーター多め)

スポンサーリンク

グラデーション関連のカラーツール

「グラデーション関連カラーツール」

綺麗で美しい配色を見ることができる
グラデーションカラーに特化している
無料のオンラインカラーツールです。

デザインのトレンド(今時の流行)として
Webデザイン、グラフィックデザイン、
パッケージデザイン、ゲームデザイン等
様々な分野で利用されている配色です。

トレンドのグラデーション例だけでなく、
自分好みにグラデーションカラー作成し
利用できるものも数多く揃えてみました。
CSSコードも簡単にコピーができ便利。

スポンサーリンク

① Grabient

grabient

Grabientは、グラデーションカラーを
好みでカスタムや作成できる配色ツール。

 特徴 ・Webやグラフィックデザイン等に使える
 美しいグラデーションカラーの見本サイト。
・綺麗なグラデーションカラー25種類
・調整・変更を加えてダウンロード可能。
・ボタン1つで作成したCSSコードも
 コピーできるという優れた機能あり。
 その他  

Grabient

Beautiful and simple UI for generating web gradients.

② WebGradients

webgradients

WebGradientsは、Grabientと同じく
美しいグラデーションカラーを揃えた
配色コレクションツールになります。

 特徴 ・様々なグラデーションを見つけれる
 カタログ風のカラー見本サイト
・グラデーションカラーは180種類
・カラーをクリックでウィンド全体に表示
・調整・変更を加えてダウンロードできる。
・2500×2500pxのPNGファイルDW有り
・ページ上でボタンクリックだけで、
 ChromeやInternet Explorer等の
 クロスブラウザ対応CSSコードのコピペ可
・PhotoshopやSketchで使用できる
 ファイルもあるのでUIデザインにも便利。
 その他  

WebGradients

Free collection of 180 background gradients that you can use as content backdrops in any part of your website.

③ CoolHue 2.0

coolhue2.0

CoolHue 2.0は、
デザイナーにより1つずつキュレートされた
グラフィックカラーがまとめてあるサイト。

 特徴 ・グラフィックカラーの見本サイト。
60種類の美しいグラデーションを公開
・Sketchのプラグインが提供されていて、
 Sketch上ですぐに利用することができる。
・CSSコード、PNGファイルなどの
 無料ダウンロードも可能になっている。
 その他  

CoolHue 2.0

Get coolest handpicked gradient colors collection palette for your next project, alternatively copy css or download as image too.

④ GradPad

gradpad

GradPadは、選んだ2つのカラーを混ぜ
グラデーションを作れるツールの1つ。

 特徴 ・グラフィックカラーの見本サイト。
・角度や位置を細かく設定してオリジナルの
 グラデーションを作成できるツール。
・画面全体にグラデーション表示されるので
 細かいチューニングが行い易い。
・「Get CSS for this Gradient」で
 CSSソースコードのコピーができる。
・「Gradient Gallery」で美しい配色を
 まとめてチェックが可能。
 その他  

GradPad

CSS gradient generator, create lovely CSS color gradients for web designs in the browser

⑤ 0to255

0to255

0to255は、1つの色を選択することで
コントラスト・色合いなどを調節した
グラデーションを表示してくれるサイト。

 特徴 ・1色ごとのグラデーション色見本サイト
ある1色について最も明るい色から、
 最も暗い色までのグラデーション表示可能
・ワンクリックでカラーコードをコピー
・Webデザインのhoverを決める際に、
 リンクカラー選択に便利。
 その他  

0to255

Choose colors for your logo, website, business, room, or print design project. Adjust colors quickly and easily.

⑥ uiGradients

uigradients

uiGradientsは、色々なグラデーションの
配色が紹介されているサービスの1つ。

 特徴 ・美しいグラデーションが多数
・メニュー「Show all gradients」で
 ブラデーションのサンプル一覧表示。
・「<>(Get css)」でコードコピー画面表示。
 その他  ※ キーボド操作も可能
・shiftキーでグラデーションのサンプル一覧
・enterキーでCSSコードのコピー画面。

uiGradients

uiGradients is a handpicked collection of beautiful color gradients for designers and developers.

⑦ shade

shade

shadeは、自分でグラデーションを
作れるカラーツールになります。

 特徴 ・2色の色相、彩度、明度を調整できて、
 自分好みのグラデーションを作成できる。
・プレビューを確認しながら編集で便利。
・右下に表示されるCSSをコピーすれば、
 そのまま貼り付けで利用も可能。
 その他  

shade

Mathematically derived gradient explorer

⑧ CSS GEARS – Gradients Cards

css-gears-gradients-cards

CSS GEARS – Gradients Cardsは、
23種類のグラデーションの見本が
公開されているカラー見本サイト。

 特徴 ・鮮やかなグラデーションが目を引くサイト
23種類の綺麗なグラデーション
・同系色のグラデーションが多めですが、
 手でカラーコードの変更しアレンジ可能。
・カードの下にあるゲージを操作すると、
 グラデーションの色味調整ができる。
・CSS、Sketch、Adobe XDの3種類の
 エクスポートが準備されている。
 その他  

CSS GEARS – Gradients Cards

The Ultimate gradients guide for your next project sketch,Adobe xd and css Gradients

⑨ CSS Gradient

css-gradient

CSS Gradientは、シンプルな
グラデーション作成ツール。

 特徴 ・グラデーション作成・見本サイト
・画像をアップロードし色を抽出したり、
 細かいカスタマイズが自分で行えるツール。
・メニュー「SWATCHES」を選択すると、
 サンプルのグラデーションを見れる。
・カラーパレットをクリックすれば、
 CSSコードをコピー可能。
 その他  

CSS Gradient

As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile.

⑩ Ultimate CSS Gradient Generator

ultimate-css-gradient-generator

Ultimate CSS Gradient Generatorは、
老舗のグラデーションツーつの1つ。

 特徴 ・昔からあるグラデーションツール
・2カラー以上の配色も追加できる。
・サンプルのグラデーションの編集が可能。
・クロスブラスザ対応のCSSコード。
 その他  

Ultimate CSS Gradient Generator

A powerful Photoshop-like CSS gradient editor

スポンサーリンク

⑪ ColorSpace

colorspace

ColorSpaceは、選んだ色を用いて
グラデーションを作成できるツール。

 特徴 ・シンプルなグラデーションツール。
・1色決めるとそれに相応しい配色を
 パレットに表示してくれる。
・グラデーションは2色と
3色で自分好みに
 作成することが可能になっている。
・宇宙のイメージで作られていてお洒落。
 その他  

ColorSpace

Here you can find the perfect matching color scheme for your next project! Generate nice color palettes, color gradients and much more! Your space for everythin

⑫ Gradient Generator

gradient-generator

Gradient Generatorは、色2色を選択して
スライダーを左右に動かすことで段階的に
グラデーションを作成できるカラーツール。

 特徴 Color Designerのジェネレーターの1つ。
・スライダーを「0〜40」の範囲で
 操作することでグラデーションを作れる。
 その他  

Gradient Generator

The tool generates a stepped gradient between 2 colors. To change one of the colors, you can use the color picker or preselected swatches. Click on one of the b

⑬ Gradient Magic

gradient-magic

Gradient Magicは、
他のツールとはかなり違うユニークな
CSSグラデーションツールになります。

 特徴 他と一線を画すグラデーションツール
・普段あまり見かけないチェック柄、
 ストライプ柄、サンバースト柄などと
 様々なグラデーションがストックされる。
・CSSコピーもワンクリックで可能。
 その他  

Gradient Magic

A Free Gallery of Fantastic and Unique CSS Gradients.

⑭ Gradients Party

gradients-party

Gradients Partyは、Webサイトの
背景やボタンなどの手軽に使える
グラデーションをストックしたサイト。

 特徴 ・使い勝手の良いグラデーションカラーを
 扱っているカラーライブラリー
・カラーもボタン1つでコピー可能。
・HEXとRGB値の切り替えができる。
Auto-Prefixに対応。
 その他  

Gradients Party

Gradients Party is a collection of gradients for your buttons.

⑮ HUE.css

hue.css

HEU.sccは、写真を撮影した感じの
リアルな影(シャドウ)を表現できる
グラデーションカラーツールです。

 特徴 ・写真で撮影したような影を表現可能。
・CSSグラデーションが全49種類。
 その他  

HUE.css

⑯ Gradient Hunt

gradient-hunt

Gradient Huntは、直線・放射状の
グラデーションカラーをメインに
取り扱っているカラーパレットです。

 特徴 ・直線・放射状のグラデーションを中心に
 ストックされているカラーライブラリー
・ユーザーが投稿したグラデーション
・CSSコード出力と画像出力どちらもある。
・人気順やランダム別に表示可能。
 その他  

Gradient Hunt

Thousands of trendy color gradients in a curated collection that is updated daily. Get a fresh color gradient for your next design project and save all the grad

⑰ Color Blender

color-blender

Color Blenderは、色を2つ決めると
その2色の中間色を最大で10色まで
表示してくれるカラーツールです。

 特徴 ・2色間の色を表示してくれるカラーツール
・ちょっとしたグラデーション色を
 決めるのに使える?
 その他  

Color Blender

⑱ Eggradients

eggradients

Eggradientsは、卵型デザインの
グラデーション見本サイトです。

 特徴 ・グラデーション見本サイトの1つ。
・グラデーションの種類200以上
・Webデザインで使いやすいカラーが多め。
・グラデーションはCSSコードで出力可能。
・色を選択した後、下までスクロールすると
 その色のグラデーションを利用した実際の
 Webデザイン、UIデザイン、イラスト等の
 サンプルを見れるでかなり参考になる。
 その他  

Eggradients

Ready to use gradient background colors. ✓ Cool Gradients are prepared according to the latest design trends. And it is served in the form of eggs. ✓ With hex

⑲ CSS Gradient Animator

css-gradient-animator

CSS Gradient Animatorは、
アニメーション付きグラデーションを
簡単に作成できてしまうカラーツール。

 特徴 ・アニメーション付きグラデーション
 作成カラーツール。
・JavaScriptを使わずにCSS3だけで表現可能
・好きな色を選択し、アニメーション速度と
 方向を決定したらプレビューで完成。
 その他  

CSS Gradient Animator

A CSS generator to create beautiful animated gradients for use on your website.

⑳ Infinite Gradients

infinite-gradients

Infinite Gradientsは、ランダムに
表示されるグラデーションから、
好きな配色を探せるカラーツール。

 特徴 ・グラデーション作成ツール。
・画面のクリックでアニメーションが開始、
 グラデーションの位置を決め再びクリックの
 単純操作で配色を見つけることができる。
・ソースコードもそのままコピー可能。
 その他  

Infinite Gradients

㉑ COLORION – Gradient Buttons

colorion-gradient-buttons

COLORIONのグラデーション付き
ボタンのCSSコードを配布するページ。

 特徴 ・グラデーション付きボタンのライブラリ
・ボタンのホバー時のアニメーション
 スタイルを一緒にコードコピー可能。
 その他  

COLORION – Gradient Buttons

Beautiful Gradient Buttons with Hover Effect

㉒ Gradient Buttons

gradient-buttons

Gradient Buttonsは、
Webデザインに使える超軽量(6.5kb)の
CSSグラデーションボタン配布サイト。

 特徴 ・CSSグラデーションボタンのライブラリ
・ボタンのサイズやカラーを簡単に変えれる
 オプション.classが豊富にある。
 その他  

Gradient Buttons

Gradient Button, Ui Button, Css Button Library

㉓ CSS3 Gradients

css3-gradients

CSS3 Gradientsは、GitHubから使える
CSS3グラデーションに特化したサイト。

 特徴 ・CSS3グラデーションのライブラリ
デモページでCSSだけで作られた
 パターンの確認が可能。
 その他  

CSS3 Gradients

Library of CSS3 Gradients. Contribute to estelle/CSS3Gradients development by creating an account on GitHub.

㉔ Mesh Gradients

mesh-gradients

Mesh Gradientsは、
グラデーションを使った美しい画像を
ダウンロードできるサービスの1つ。

 特徴 ・他のグラデーションジェネレーターと違い
 CSSコードを出力できない。
・様々な色が違う形で重なり合うイメージの
 美しいグラデーションサンプルがある。
 その他  

Mesh Gradients

100 mesh gradients in .sketch, .png, .ai, .jpg, .eps

㉕ Blend

blend

Blendは、好きな2つのカラーを選択して
グラデーションを作成することができる
グラデーションジェネレーターです。

 特徴 ・グラデーションジェネレーターの1つ。
・角度の変更、放射線グラデーションに
 変えることもできる。
 その他  

Blend

Blend—Create and customize beautiful CSS3 gradients.

まとめ

以上が、グラデーション関連の
カラーツール25選まとめでした。

これだけ知っていれば、グラデーションを
デザインやイラストに生かし制作する際に、
かなり役立つのではないでしょうか。

なお、その他の無料カラーツールは
下の記事に一通りまとめています。

また、配色に関わる書籍・本は 
次の記事を参考にしてみてください。

スポンサーリンク

シェアする