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

Warning: Undefined array key "host" in /home/azuldesign/mrzw-design.com/public_html/wp-content/themes/simplicity2/lib/punycode.php on line 80

Warning: Undefined array key "host" in /home/azuldesign/mrzw-design.com/public_html/wp-content/themes/simplicity2/lib/punycode.php on line 80

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

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

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

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

ジャンル	カラーツール名
グラデーション関連 ① 〜㉕	Grabient
	WebGradients
	CoolHue 2.0
	GradPad
	0to255
	uiGradients
	shade
	CSS GEARS – Gradients Cards
	CSS Gradient
	Ultimate CSS Gradient Generator
	ColorSpace
	Gradient Generator
	Gradient Magic
	Gradients Party
	HUE.css
	Gradient Hunt
	Color Blender
	Eggradients
	CSS Gradient Animator
	Infinite Gradients
	COLORION
	Gradient Buttons
	CSS3 Gradients
	Mesh Gradients
	Blend

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

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

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

① Grabient

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

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

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

Grabient

Grab yourself a gradient

Beautiful and simple UI for generating web gradients.

www.grabient.com

② WebGradients

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

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

特徴

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

その他

WebGradients

Free Gradients Collection by itmeo.com

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

webgradients.com

③ CoolHue 2.0

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

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

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

CoolHue 2.0

Gradient Colors Collection Palette - CoolHue 2.0

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

webkul.github.io

④ GradPad

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

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

特徴

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

その他

GradPad

CSS Colour Gradients with GradPad, beautiful CSS color gradient generator for your designs

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

ourownthing.co.uk

⑤ 0to255

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

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

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

0to255

A Most Useful Color Picker | 0to255

Discover lighter or darker shades of any color. Join the 3+ million people who have used 0to255 to choose colors for their website, logo, room interior, and pri

www.0to255.com

⑥ uiGradients

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

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

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

uiGradients

uiGradients - Beautiful colored gradients

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

uigradients.com

⑦ shade

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

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

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

shade

http://jxnblk.com/shade/

jxnblk.com

⑧ CSS GEARS – Gradients Cards

css gears gradients cards - グラデーション関連のカラーツールまとめ

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

特徴

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

その他

CSS GEARS – Gradients Cards

https://gradients.cssgears.com

gradients.cssgears.com

⑨ CSS Gradient

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

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

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

CSS Gradient

CSS Gradient — Generator, Maker, and Background

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

cssgradient.io

⑩ Ultimate CSS Gradient Generator

ultimate css gradient generator - グラデーション関連のカラーツールまとめ

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

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

Ultimate CSS Gradient Generator

Ultimate CSS Gradient Generator from ColorZilla

A powerful Photoshop-like CSS gradient editor

⑪ ColorSpace

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

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

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

ColorSpace

ColorSpace - Color Palettes Generator and Color Gradient Tool

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

mycolor.space

⑫ Gradient Generator

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

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

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

Gradient Generator

Gradient Generator - colordesigner.io

The tool itself is used to generate a gradual change in the color gradient from one color to another, essentially leaving the user with a result of many differe

colordesigner.io

⑬ Gradient Magic

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

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

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

Gradient Magic

Gradient Magic

A Free Gallery of Fantastic and Unique CSS Gradients.

www.gradientmagic.com

⑭ Gradients Party

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

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

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

Gradients Party

Gradients Party

Gradients Party is a collection of gradients for your buttons.

gradients.party

⑮ HUE.css

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

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

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

HUE.css

HUE.css - A huge pack of 49 photorealistic CSS gradients

evankarageorgos.github.io

⑯ Gradient Hunt

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

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

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

Gradient Hunt

Gradient Hunt - Beautiful Color Gradients

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

Color Blender

meyerweb.com

⑱ Eggradients

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

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

特徴

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

その他

Eggradients

Gradient Background Colors - Eggradients.com

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

www.eggradients.com

⑲ CSS Gradient Animator

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

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

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

CSS Gradient Animator

CSS Gradient Animator

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

www.gradient-animator.com

⑳ Infinite Gradients

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

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

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

Infinite Gradients

Infinite Gradients

projects.skratchdot.com

㉑ COLORION – Gradient Buttons

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

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

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

COLORION – Gradient Buttons

Gradient buttons

gradientbuttons.colorion.co

㉒ Gradient Buttons

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

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

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

Gradient Buttons

A Lightweight Gradient Button Css Library | GradientButtons

Gradient Button, Ui Button, Css Button Library

ysoftaoglu.github.io

㉓ CSS3 Gradients

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

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

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

CSS3 Gradients

GitHub - estelle/CSS3Gradients: Library of CSS3 Gradients

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

github.com

㉔ Mesh Gradients

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

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

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

Mesh Gradients

Free Mesh Gradient Collection

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

www.ls.graphics

㉕ Blend

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

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

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