グラデーション
![グラデーション](https://webty.jp/staffblog/wp-content/uploads/2019/10/4481f8cfbc6cb810282b7568e386ba8a-890x500.jpg)
どうも中野です。
今日、グラデーションを使う事があって、普段あまりグラデーションを使わないので、どのようなグラデーションにするか悩んでいた時、とりあえずネットで調べてみれば何か出てくるのではないかと思い、調べてみたら、出てくる出てくる!みんな便利なものを考えるねー!と感心するぐらい出てきました。
今回はその中から、使いやすかったものを紹介しようと思います。
1.webgradients
![](https://webty.jp/staffblog/wp-content/uploads/2019/10/c2e12f2c0f7b08348613a3a8d96fa1d2-1024x644.png)
このサイトは直感的に操作が出来、「CSSコードのコピー」と「PNG画像のダウンロード」が出来ます。
右上のボタンから、SKETCHとPSD用のグラデーションデータがダウンロード出来ます。
2.uiGradients
![](https://webty.jp/staffblog/wp-content/uploads/2019/10/e723e75b1037e2a494b644814390a3b9-1024x635.png)
このサイトも先ほどのサイトと一緒で、綺麗なグラデーションを紹介しているサイトになります。
3.GradPad
http://ourownthing.co.uk/gradpad.html![](https://webty.jp/staffblog/wp-content/uploads/2019/10/f5c3b0b2c0c53b03140057e0a2ac16af-1024x634.png)
このサイトはドラッグとクリックの直感的な作業で自分好みのグラデーションが作成できるサイトになっています。
また、ギャラリーにはあらかじめサンプルが用意されています。
そこからお気に入りのものを探し、自分好みにカスタマイズするのが良いと思います。
4.Granim.js
https://sarcadass.github.io/granim.js/![](https://webty.jp/staffblog/wp-content/uploads/2019/10/2567c90686e416a8b7b48fe2baaa7fac-1024x629.png)
グラデーションをアニメーション化する事ができるサイトらしいです!
私には何を言っているのか、何を書いているのかさっぱりですが、ここに書いてあるコードをコピーすれば動くグラデーションができるみたいです!
機会があれば動かしてみてはいかがでしょう?
皆さんもグラデーションを使う時は参考にしてみてください。