Webデザインに役立つグラデーション検索サイト10選

Webデザインや普段のクリエイティブな作品に使えるグラデーションを検索できるサイトをまとめました。

キレイなグラデーションを作るのには時間がかかるものですよね。

今回ご紹介するサイトのほとんどでCSSコードやカラーコードをコピーできますので、Webデザインに役に立つと思います。

これから紹介するウェブサイトを活用して、デザインを効率的にしましょう!

 

グラデーション検索サイトまとめ

itmeo

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.

180種類のグラデーションを用意しているウェブサイトです。

CSSをコピーしたり、Pngの画像をダウンロードして使うことができます。

SketchやPhotoshopのファイルをダウンロードもできるようです。

 

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

数え切れないほどの豊富なグラデーションを閲覧できるサイトです。

線状や円型のグラデーションのCSSコードもコピーが可能です。

人気のグラデーションも探すことができるので、流行りのカラーも見つけられそうですね。

 

uiGradients

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

画面いっぱいのグラデーションを表示してくれるサイトです。

左上の「Show all gradient 」をクリックすれば、色ごとのグラデーションが検索できます。

色ごとのカラーコードのコピーが簡単でとても使いやすいです。

 

Grabient

Grab yourself a gradient
Beautiful and simple UI for generating web gradients.

とてもキレイなUIで様々な操作がやりやすいサイトです。

角度、カラーの位置、カラーの追加が簡単に行うことができます。

 

Coolhue

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.

グラデーションの数は多くないですが、小さなパレットなので一気に全て一覧できるサイトです。

 

Gradient Buttons

Buttons with CSS gradients - Gradient Buttons
Gradient buttons with Css

このサイトは少し特殊で、グラデーションでデザインされたボタンの一覧を見ることができるサイトです。

ボタンの上にカーソルを持っていくと、ホバーエフェクトを見ることができます。

CSSのコードのコピーもホバーエフェクトの付いたボタンです。

 

EggGradient

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

グラデーションの卵がたくさん見られるサイトです。

色ごとのグラデーションや、ご自身でグラデーションを作成することもできます。

 

Coolors

 

Gradient color palettes - Coolors
Get inspired by these beautiful gradient color schemes and make something cool!

グラデーションに使えそうなカラーパレットを見られるページです。

Adobe Colorのような見た目のサイトですね。

 

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.

グラデーションの作成が簡単にできるサイトです。

プリセットのグラデーションの種類は少なそうですが、オンラインでグラデーションを作成するならこのサイトがおすすめです。

好きな色の画像をアップロードすると、その画像からグラデーションを作ってくれる機能もあります。

 

Gradient Backgrounds

Gradient Backgrounds – 🌈 The Best Gradient Sites All in One Place
Discover the best gradient backgrounds from a curated collection of the ultimate list of gradient sites. With 1000+ gradients, it's easy to find the 👌 color!

この記事で紹介してきたサイトを同じページで閲覧できるサイトになります。

このサイトをブックマークしておけば、グラデーションを探すときには困ることはなくなりそうですね。

 

どうでしたでしょうか?

特に最後にご紹介した「Gradient Backgrounds」は便利なサイトですね。

ご自身にあったウェブサイトを見つけて、創作活動に役に立ててください

ではまた!

 

 

CSSコーディング
この記事をシェアする!

シアトルで学位取得後、独学でグラフィックデザイナーの道へ
現在はWebディベロッパーになるため勉強中、Codepenに出没します
このサイトではGIFを使った読みやすいブログを目指しています

SHUNYAをフォローする
Be Creativ
タイトルとURLをコピーしました