2019.02.05

グラデーションを作ってみよう

デザイン

こんにちは!
エクスフィールドの福原です。

今回は「グラデーション」について書いていきたいと思います。

最近、写真のフィルターやアプリのアイコンやヘアスタイルなどでグラデーションを使っているデザインが増えた気がします。

もちろんWebサイトでも、ボタンを立体的に見せたり、単色では表せない雰囲気を表現したりするのにグラデーションを使用しているデザインを目にします。

https://www.grabient.com/

ここのサイトではグラデーションを見ながら、色の追加や角度、色の変わり目を調節できます。
瞬時にグラデーションの変化を確認できるので、好みのグラデーションが作れます!
さらに…!このサイトで作ったグラデーションCSSに書き出すことができます!


background-color: #21D4FD;
background-image: linear-gradient(297deg, #21D4FD 18%, #B721FF 62%);

↑書き出したCSS

うん!便利!
グラデーションを使う機会があれば、こちらのサイトを利用していきたいですね。


ちなみに、福原はこのグラデーションが好きですね。

単色で物足りない!もっとオリジナリティがあるデザインがいい!と思ったら、グラデーションを使用してみるのもいいかもしれません。

Share on Facebook
Pocket


1 / 11