色彩検定１級がオススメする 🎨 グラデーション生成 Web ツール５選

こんにちは。ちょっと自分でもどこを目指しているのかわからない [^1] [あずきしろもち（@azukisiromochi）](https://twitter.com/azukisiromochi) です。

[^1]: 最近はゲーム開発がしてみたくてドット絵を打ったり、 DTM をはじめたり、相変わらず迷走中。



以前、 [色彩検定１級がオススメする 🎨 配色Webツール５選](https://qiita.com/azukisiromochi/items/c0b3ab496974d3706f31) という記事で配色 Web ツールを紹介しましたが、今回は **グラデーション生成 Web ツール** のお話。

ターゲットとは、 `「 CSS のグラデーション難しいんだよ！　手軽にそれっぽいグラデーションを決めてくれるツールはよ！」` って感じで、グラデーションの繊細な調整をするのではなく、かんたんにグラデーションが生成したい層です。

<br>

ということで、難しい操作なくグラデーションを生成できるツールを紹介していきます ❗
※各動画で表示されるグラデーションは gif の色数の関係で画質が低くなっています（ツール名がリンクになっているので、ぜひアクセスしてみてください！）



## :art: [WebGradients](https://webgradients.com/)

![web-gradients.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317946/e8986027-6d88-3104-4da5-3bcbb708fc50.gif)

### 概要・使用感

バリエーション豊かな 180 種類のグラデーションが用意されている Web サービス。

これは配色 Web ツールの方でも紹介しましたが、もともとグラデーションを決定するためのサービスですので、まさに手軽にグラデーションを生成できます！



### メリット

- 色数、パターン、イメージ、の異なる大量のグラデーションが用意されている
- CSS のコードをコピーできるため、そのまま利用可能



### デメリット

- サイト内で微調整（色の変更など）ができない
- 量は多いものの 180 種類に限られるため、マッチする配色がない場合がある



## :art: [Eggradients](https://www.eggradients.com/)

![Eggradients.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317946/2d9ebfd7-83ed-4346-98ae-af54a5d77e0d.gif)



### 概要・使用感

200種類を超える数のグラデーションが用意されている Web サービス。

グラデーションを卵型で表示している一風変わったサイトですが、色でフィルターできるなど機能も豊富です。



### メリット

- 色数、パターン、イメージ、の異なる大量のグラデーションが用意されている
- CSS のコードをコピーできるため、そのまま利用可能



### デメリット

- サイト内で微調整（色の変更など）ができない
- 良くも悪くも卵型でしかグラデーションが確認できないため、実際に使用してみるとイメージが違って感じられることがある



## :art: [uiGradients](https://uigradients.com/)

![uiGradients.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317946/f4438088-9e07-5866-2c01-c940372cf55d.gif)


### 概要・使用感

綺麗なグラデーションをたくさん用意されている Web サービス。

大画面で確認するだけではなく、一覧でも表示することもできて、見やすい UI がよいですね！

グラデーションの角度などをかんたんに変えられるのも Good です！



### メリット

- CSS のコードをコピーできるため、そのまま利用可能
- グラデーションの角度などの調整ができたり、画像としてダウンロードをすることもできる



### デメリット

- グラデーションの数は多くないので、気にいるものが見つからないかも？
  ※その代わり、好きなグラデーションをプルリクすることで追加されることがあるとか

- コピーがワンクリックではなく、ひと手間かかる



## :art: [GradPad](http://ourownthing.co.uk/gradpad.html#)

![GradPad.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317946/f933ebda-3f8d-7524-f70d-567b1fa0d35f.gif)



### 概要・使用感

これまで紹介したツールの中で一番細かくグラデーションを作ることができる Web サービスです。

予め用意されているグラデーションから好きなものを選び、自分の好みに合わせて調整していく使い方になるでしょうか。

かんたん操作……とはいかないですが、役立つこと間違いなしです！



### メリット

- グラデーションを調整できるため自由度の高い作成が可能
- CSS での設定が難しい 3 色以上のグラデーションを直感的に作成できる



### デメリット

- 自由な分、操作が少し難しい
- コピーがワンクリックではなく、ひと手間かかる



## :art: [FUZE](https://fuze.8bit.codes/)

![FUZE.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317946/9a533044-c001-199d-fcc4-cfff44ef23ea.gif)




### 概要・使用感

これまで紹介したツールとは少し切り口が違うツールを紹介します。

FUZE はグラデーションのアニメーションを作成するツールで、色を追加すれば表示されているアニメーションも変化していきます。

コードをコピーすればアニメーションごとコピーできるため、あなたのサイトを素敵なグラデーションで彩ることができること間違いなし！



### メリット

- かんたんには作ることの出来ないグラデーションのアニメーションをかんたんに作成できる
- CSS のコードをコピーできるため、そのまま利用可能



### デメリット

- ただの（静止している）グラデーションはコピーできない
- アニメーションの利用シーンが限られる



## :art: [グラデーション日和](https://fav-gradation.yumyumcolor.com/)

![グラデーション日和.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317946/2ee046e2-fdbd-53c9-bd67-627bac3a230a.gif)


### 概要・使用感

例によって [^1] オススメ 5 選なのに 6 種類目……。

「グラデーション日和」は僕が作った Web サービスですが、前回とは少し違います。

今回この記事を書いていて、普段使っているグラデーション生成ツールに **ぽちぽちクリックしているだけでランダムにグラデーションができてしまう** タイプのものがないことに気づきました。

……なので作りました！（笑）

（ [こちら](https://qiita.com/azukisiromochi/private/5eb462c08ef30bdd0066) の記事で詳しく紹介していますので、よかったら読んでみてください！）

[^1]: 前回の記事でも自分の開発した Web サービスを 6 つめに紹介してしまうこざかしさ



### メリット

- クリックするだけでランダムなグラデーションが生成できる
- CSS のコードをコピーできるため、そのまま利用可能



### デメリット

- （メインの色は決めれるものの）ランダムなので好みのグラデーションにたどり着けないことがある
- 3 色以上のグラデーションに対応していない



## まとめ

CSS でグラデーションを使うシーンで、ノーヒントで作るのは流石に僕もできません！　きっとみんながそうだと思います。
なので、なるべく手軽にグラデーションを作成できるサイトを紹介してみました。

配色のときにも書きましたが、グラデーションを作る場合も **『万能なひとつのツールがあればいい』ではなく、用途に合わせて利用できるツールをたくさん知っている方が有利** だと思っています。

今回紹介したサイトが、みなさまのグラデーション作成ツールの引き出しのひとつになると嬉しいです ❗

（ ~~あわよくば僕のサイトを引き出しに……~~ ）
（ ~~ストックだけじゃなくて LGTM もしてほしいな……~~ ）