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

2017/09/24

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

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

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

WebGradients

webgradients

https://webgradients.com/

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

 

 

 

 

uiGradients

uigradients

https://uigradients.com/

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

 

 

 

 

CSS Gradient Animator

css-gradient-animator

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

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

 

 

 

 

Grabient

grabient

https://www.grabient.com/

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

 

 

 

 

Gradient Buttons

gradient-buttons

http://gradientbuttons.colorion.co/

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

 

 

 

 

Gradient World

gradient-world

https://gradient.world/

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

 

 

 

 

coolHue

coolhue

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

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

 

 

 

 

Randomized CSS3 Gradient Generator

randomized-css3-gradient-generator

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

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

 

 

 

 

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

 

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

Related Post

topへ戻る