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

デザイン

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

2019年02月05日 8:00 

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

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

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

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

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



 

uiGradients

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

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

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

 

WebGradients

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

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

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

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

 



Grabient

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

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

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

 

Free Mesh Gradients Collection

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

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

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

 

[Ad3]

CSS Gears

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

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

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

 

GradPad

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

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

 



CoolHue

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

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

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

 

Eggradients

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

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

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

  1. カラーコードのコピー
  2. CSS(background)のコピー

 



Colorion

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

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

 

 

関連記事

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。ブログの執筆を通じて、やっと日本語Lv.20くらいになれた気がします。 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物が好きな皆さん、小動物トークしましょう!