トレンドのグラデーションが揃ったオンラインツール9選

おはようございます！社員Aです👩

今回は、トレンドのグラデーションが揃っているオンラインツールをいくつかご紹介します。

2〜3年前主流だったフラットデザインから、最近は洗練されたグラデーションデザインもよく見かけるようになりました。

トレンド感のあるグラデーションデザインを取り入れるのは難しい印象がありますが、今回ご紹介するオンラインツールを活用することで手軽にグラデーションデザインを取り入れることができます！

uiGradients

uiGradientsではトレンドのグラデーションが多く公開されており、それぞれ下記の形式でコピー・書き出すことができます。

1. カラーコードのコピー
2. CSS（background）のコピー
3. jpgでダウンロード

デザイナーだけでなく、コーダーの方にも便利なCSSもコピペで使えます。

uiGradients

 

3 Tweets

4102 Shares

185 Users

4429 Pockets

uiGradients - Beautiful colored gradients

https://uigradients.com

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

WebGradients

柔らかい印象のグラデーションから、よく見かけるグラデーションまでとにかく数が豊富で気に入るグラデーションが見つかります！

それぞれ下記の形式でコピー・書き出すことができます。

1. カラーコードのコピー
2. CSS（background）のコピー
3. pngでダウンロード

また、こちらのツールは「Sketch」と「Photoshop」用ですべてのグラデーションをダウンロードすることもできるので、様々なグラデーションを試しながらデザインしたい時にもおすすめです。

webgradients.com

 

3 Tweets

12822 Shares

194 Users

4391 Pockets

Free Gradients Collection by itmeo.com

https://webgradients.com

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

Grabient

こちらのグラデーションツールサイトは、あらかじめいくつかパターンが用意されていますが、自分の好みの色や角度で調整してオリジナルグラデーションを作ることもできます。

それぞれCSS（background）をコピーすることができます。

作成したグラデーションはSketch用にダウンロードすることもでき、デザインにダイレクトに反映できるのも支持されているポイントです。

www.grabient.com

 

1 Tweet

1325 Shares

69 Users

1711 Pockets

Grab yourself a gradient

https://www.grabient.com

Beautiful and simple UI for generating web gradients.

Free Mesh Gradients Collection

美しいトレンドグラデーションが100種類も揃っているサイトです。WEBだけでなく、紙媒体などでも活躍しそうです。

それぞれ下記の形式でダウンロードできます。

1. Aiデータ
2. Sketchファイル
3. EPS
4. JPG
5. PNG

www.ls.graphics

 

2 Shares

20 Users

85 Pockets

Free Mesh Gradient Collection

https://www.ls.graphics/meshgradients

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

CSS Gears

公開されているグラデーションを自分好みにカスタマイズすることもできるオンラインツールです。

それぞれ下記の形式でコピー・書き出すことができます。

1. カラーコードのコピー
2. CSS（background）のコピー
3. XD用ファイルのダウンロード
4. Sketch用ファイルのダウンロード

gradients.cssgears.com

 

222 Shares

18 Users

167 Pockets

CSS GEARS - Gradients Cards

https://gradients.cssgears.com

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

GradPad

デザインプロジェクト用の美しいグラデーションをすばやく直感的に作成できるように設計されているオンラインツールです。

作成したグラデーションは、CSS（linear-gradient）を書き出すことができます。

ourownthing.co.uk

 

68 Shares

14 Users

242 Pockets

CSS Colour Gradients with GradPad, beautiful CSS color gradient generator for...

http://ourownthing.co.uk/gradpad.html

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

CoolHue

こちらのサイトも美しいグラデーションが豊富に配布されており、それぞれ下記の形式でコピー・書き出すことができます。

1. カラーコードのコピー
2. CSS（background）のコピー
3. pngファイルのダウンロード

また、Sketch用のプラグインも配布されており、サイト上で公開されているグラデーションがSketch上でも手軽に使えます。

webkul.github.io

 

2413 Shares

43 Users

1451 Pockets

CoolHue 2.0 - Coolest Gradient Hues and Swatches

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

Coolest handpicked Gradient Hues and Swatches for your next super amazing stuff

Eggradients

サイト名の通り、たまごの形をしたグラデーションが公開されています。見た目からユニークですね！

数も豊富で200種類以上のグラデーションが豊富されています。

こちらのサイトも美しいグラデーションが豊富に配布されており、それぞれ下記の形式でコピー・書き出すことができます。

1. カラーコードのコピー
2. CSS（background）のコピー

www.eggradients.com

 

233 Shares

4 Users

379 Pockets

Gradient Background Colors - Eggradients.com

https://www.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 and CSS codes.

Colorion

hover時のアニメーションも一緒にCSSでコピーできるオンラインツールです。

グラデーションに動きもつけたい時に手軽に取り入れられるのが良いですね。

Beautiful Gradient Buttons with Hover Effect

 

33 Shares

23 Users

233 Pockets

Gradient Buttons

https://gradientbuttons.colorion.co

Beautiful Gradient Buttons with Hover Effect