綺麗なグラデーションを作成できるサイト8選

2017/09/24

こんにちは。
今回は綺麗なグラデーションを作成できるサイト8選です。

デザインやWeb制作をしていると綺麗なグラデーションを作成したい時ってありますよね。
そこで、今回は綺麗なグラデーションを作成できるサイトを紹介します。

綺麗なグラデーションを作成できるサイト!

WebGradients

webgradients

https://webgradients.com/

180種類のおしゃれなグラデーションがまとめられたサイトです。
それぞれのグラデーションのpng画像をダウンロードでき、CSSをコピーすることもできます。
PhotoshopやSketch用のグラデーションも配布されていますよ。

「WebGradients」の使い方はこちら

180種類のおしゃれなグラデーションがまとめられたサイト「WebGradients」
こんにちは。 今回は180種類のおしゃれなグラデーションがまとめられたサイト「WebGradients」です。 180種類のおしゃれなグラデーシ...

 

 

uiGradients

uigradients

https://uigradients.com/

美しいグラデーションカラーを集めたサイトです。
美しいグラデーションをランダムに表示し、左右の矢印をクリックして好きなグラデーションを見つけます。
グラデーションを一覧で見れ、ベースの色を選択することもできますよ。
グラデーションの位置を回転することも可能で、CSSや画像をダウンロードできます。

「uiGradients」の使い方はこちら

美しいグラデーションカラーを集めたサイト「uiGradients」
こんにちは。 今回は美しいグラデーションカラーを集めたサイト「uiGradients」です。 美しいグラデーションカラーをまとめたWebサー...

 

 

CSS Gradient Animator

css-gradient-animator

https://www.gradient-animator.com/

アニメーションするグラデーションを実装できるCSSを生成してくれるサイトです。
グラデーションの角度や位置、時間を設定し、色を2色以上指定します。
あとはコードをコピべするだけで、簡単にアニメーションするグラデーションを実装することができますよ。

「CSS Gradient Animator」の使い方はこちら

アニメーションするグラデーションを実装できるCSSを生成してくれるサイト「CSS Gradient Animator」
こんにちは。 今回はアニメーションするグラデーションを実装できるCSSを生成してくれるサイト「CSS Gradient Animator」です。 徐々...

 

 

Grabient

grabient

https://www.grabient.com/

気に入ったグラデーションをカスタマイズできるサイトです。
選択したグラデーションをカスタマイズでき、CSSをコピーすることも可能ですよ。
グラデーションを調節できるので便利ですね。

「Grabient」の使い方はこちら

気に入ったグラデーションをカスタマイズできるサイト「Grabient」
こんにちは。 今回は気に入ったグラデーションをカスタマイズできるサイト「Grabient」です。 選択したグラデーションをカスタマイズ...



Gradient Buttons

gradient-buttons

http://gradientbuttons.colorion.co/

ホバーエフェクトが美しいグラデーションボタンを集めたサイトです。
気に入ったグラデーションボタンの「Get CSS Code」をクリックするとコードが表示されてコピーすることができますよ。
マウスオーバーした時の左右の色の切り替わりがきれいですね。

「Gradient Buttons」の使い方はこちら

ホバーエフェクトが美しいグラデーションボタンを集めたサイト「Gradient Buttons」
こんにちは。 今回はホバーエフェクトが美しいグラデーションボタンを集めたサイト「Gradient Buttons」です。 ホバーエフェクトが美...

 

 

Gradient World

gradient-world

https://gradient.world/

美しい自然の写真を元に生成されたグラデーションを集めたサイトです。
写真をドラッグしてグラデーションにしたい範囲を指定することもでき、STEPS、ROTATION、SATURATIONを調節することも可能で、カラーコードもコピーできますよ。
元の写真が美しいだけあって、どのグラデーションもきれいですね。

「Gradient World」の使い方はこちら

美しい自然の写真を元に生成されたグラデーションを集めたサイト「Gradient World」
こんにちは。 今回は美しい自然の写真を元に生成されたグラデーションを集めたサイト「Gradient World」です。 きれいな自然の写真か...

 

 

coolHue

coolhue

https://webkul.github.io/coolhue/

30種類のクールなグラデーションをまとめたサイトです。
それぞれのグラデーションのCSSコードをコピーしたり、画像を保存することができますよ。
グラデーションを使用する時に参考にしたいですね。

「coolHue」の使い方はこちら

30種類のクールなグラデーションをまとめたサイト「coolHue」
こんにちは。 今回は30種類のクールなグラデーションをまとめたサイト「coolHue」です。 30種類のクールなグラデーションを集めたWeb...

 

 

Randomized CSS3 Gradient Generator

randomized-css3-gradient-generator

http://paintbycode.github.io/gradient-generator/

CSS3のグラデーションをランダムに表示するサイトです。
ベースの2色のカラーコードとCSSのコードを表示する事ができます。
CSSのコードはRGBとHEXで切り替え可能ですよ。

「Randomized CSS3 Gradient Generator」はこちら

CSS3のグラデーションをランダムに表示するサイト「Randomized CSS3 Gradient Generator」!
こんにちは。 今回はCSS3のグラデーションをランダムに表示するサイト「Randomized CSS3 Gradient Generator」!です。 CSS3のグラデ...

 

 

Webデザイン良質見本帳 目的別に探せて、すぐに使える見本集
Webデザイン良質見本帳 目的別に探せて、すぐに使える見本集

 

いかがでしたか。どのサイトも無料で手軽に作れるので便利ですね。
以上で綺麗なグラデーションを作成できるサイト8選でした。

配色パターンの参考サイト・ジェネレーターをまとめた記事はこちら

配色パターンの参考サイト・ジェネレーター18選。2色や3色、4色、5色、6色など
こんにちは。 今回は配色パターンの参考サイト・ジェネレーター18選。2色や3色、4色、5色、6色などです。 Webデザインやグラフィック...

この記事を読んだ人はこんな記事も読んでいますよ