CSSでグラデーションを使うときに役立つ便利ツール&サイトまとめ

CSSでグラデーションを作るときはlinear-gradientを使いますが、なかなか使い方が難しく、複雑になれば値の指定も結構面倒です。

そこで今回はCSSでlinear-gradientを使ってグラデーションをかけるときに役立つ便利ツールやサイトをまとめてみました。

グラデーションをかけるときに活用してみてください。

 

linear-gradientでグラデーションを作る場合

まずはCSSのlinear-gradientを使ってグラデーションを作る方法を紹介します。

グラデーションは背景に指定するのでbackground: linear-gradient(方向, 開始色, 終了色);という形で記述します。

デフォルトのグラデーションの方向は上から下(開始色から終了色)担っています。

方向の指定は90degというように角度で指定する方法に加え、to rightのようにキーワードで指定することも可能です。

.gradient01 {
  background: linear-gradient ( 方向, 開始色, 終了色 );
}

またbackground: radial-gradientと書くと円形にグラデーションをかけることができます。値の指定方法はlinear-gradientと同じです。

.gradient02 {
  background: radial-gradient ( 開始色, 終了色 );
}

 

でも慣れるまでは結構使いこなすのに苦戦することもあります。

というわけで以下からグラデーションをかけるときに使えるサービスを紹介します。

 

Ultimate CSS Gradient Generator

https://www.colorzilla.com/gradient-editor/

使い勝手はちょっとイラストレータに似ています。

パレットからグラデーションを選択できる(もちろん自分でも調整できる)し、色の指定もわかりやすいです。

とにかく直感的に使いやすいというのが一番のいいところでしょう。

画面右側にCSSコードが表示されるのでコピペして終わりです。

 

CSS Gradient

https://cssgradient.io/

こちらはグラデーションが大きく表示されていてとても見やすいのが特徴です。

操作はよりわかりやすく、不透明度まで細かい指定が可能です。

コードの量が少なくなるようになっているのでグラデーションの理解に役立ちます。

 

GradPad

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

こちらはフルスクリーンでグラデーションを確認できるサイトです。

多くの操作が操作がドラッグ&ドロップでできるので視覚的にわかりやすくなっています。

画面上の「Get CSS for this Gradient」をクリックするとCSSコードを取得できます。

UI/UXにも優れているので使っているだけでも楽しめます。

 

shade

http://jxnblk.com/shade/

画面下のレバーでグラデーションを調整できるサイトです。明度や彩度も決めることができるのが特徴ですね。

CSSコードは画面右下にリアルタイムで表示されます。

シンプルなグラデーションを作りたいときには役立つかもしれませんが、あまり使いやすくはないかな…

 

Blend

http://colinkeany.com/blend/

こちらもフルスクリーンでグラデーションを確認できるサイトです。

色は画面下、グラデーションの向きなどは画面右上から指定できます。

 

uiGradients

https://uigradients.com/

こちらは最初から用意されているグラデーションから好きなものを選ぶことができるサイトです。

イメージに合ったグラデーションが用意されているため、「うまく言えないけどこんなイメージのグラデーションが欲しい!」というときに役立つと思います。

パターンは画面左上のShow all gradientsから確認できます。

 

Gradients Cards

https://gradients.cssgears.com/

グラデーションのパターンを集めたサイトです。

カード下部のスライダーで色の調整が可能です。

このサイトのグラデーションはAdobe XDやSketchのファイルとしてダウンロードすることもできます。

 

Fresh Background Gradients

https://webgradients.com/

こちらもグラデーションを大量にリストにしたサイトです。

グラデーションの調整や変更はできませんが、psdやSketchのファイルとしてダウンロードすることができます。

パターンがかなり用意されているので気に入ったものを参考にするといいでしょう。

 

Grabient

https://www.grabient.com/

グラデーションをいくつか並べて確認できるサイトです。

色の候補が複数ある場合は、グラデーションを6個まで作れるので複数作って見比べるという使い方ができます。

もちろん角度や色の調整も可能です。

枠の左上をクリックするとCSSをコピーすることができます。コードの中身が見られないのがちょっと残念ですね。

 

CSS Gradient Animator

https://www.gradient-animator.com/

こちらはCSSのグラデーションを使ってアニメーションを作成できるサイトです。

@keyframesを使ったグラデーションのアニメーションを手軽に作成できます。

色や角度を指定してpreviewボタンで作ったアニメーションを確認できます。

 

まとめ

CSSでグラデーションを作成するときに便利なサイトまとめでした。

一番いいのは自分でコードを書けるようになることですが、グラデーションを豊富に使うようなサイトではいちいちコードを書くのも面倒だと思うので、こういったサイトを積極的に使っていきましょう。