(cache) 背景に使えるCSSグラデーション作成ツール4選とその使い方

背景に使えるCSSグラデーション作成ツール4選とその使い方

真ん中のボタンをクリックすると様々なグラデーションが表示されます。

右側のボタンをクリックすると表示されたグラデーションを調整することができます。調整は色相（Hue）、彩度（Saturation）、輝度（Lightness）で色を表すHLS色空間でおこないます。

4つのグラデーションが重なり合うのでかなり複雑な構造ですが、各レイヤーの表示位置をイメージすると調整しやすいと思います。

左側のボタンでコードを取得することができます。

webkit用のベンダープレフィックスが付いていますが、ChromeもSafariもかなり前のバージョンからベンダープレフィックスなしでも大丈夫なので、今は特に必要ないと思います。

2色のグラデーションを作ることができます。

「Base Color」を指定すると、それを基にグラデーションを作成してくれます。

「Base Color」は6桁のHEXカラーコードで指定して、HLSで調整することができます。

で、右側のGradient Spreadでグラデーションの調整をします。内容はこんな感じです。

HLSになじみがないと扱いが難しいかもしれないですが、安定感（！？）のあるグラデーションが作成できる気がします。

2種類グラデーションが順番に表示されます。

GitHubで管理されていて、お気に入りのグラデーションを追加することもできるようです。

きれいなグラデーションばかりですが、色を調整することはできません。左右の方向キーで色に変わるのが地味に便利だと思います。

こちらはanimationを使って背景色を変化させることができます。

まずは、「Add colour +」からグラデーションに使う色をカラーピッカーか6桁のカラーコードで指定します

指定した色の数ひとつにつき縦横200%の大きなグラデーションになります。3色の場合は縦横600%となります。

で、実際表示されるのは縦横100%分になります。どの部分を表示するかはbackground-positionの値で決まります。

animationでbackground-positionの値を変化させることで背景色が変化することになるわけです。

「Gradient Angle」でグラデーションの角度（方向）を調整

最初は270°になっていますので、最後に指定した色が左、最初に指定した色が右のグラデーションです。0°の場合は上から下のグラデーションになるのでそれを基準に考えるとイメージしやすいと思います。

「Scroll Angle」でbackground-positionを調整

background-positionの値は横方向、縦方向の順番で指定します。background-position:0% 0%だと左上部分が、background-position:100% 100%だと右下部分が表示されます。

「Speed」で往復にかかる時間を調整

こんな感じで色々調整できます。「Gradient Angle」と「Scroll Angle」は組み合わせると複雑ですが、仕組みをきちんと理解するとストレスなく使えると思います。

ということで、CSSでグラデーションを作る際に役立ちそうなサイトを4つ紹介しました。

2色のグラデーションならそんなに難しくないですが、複数になったり、アニメーションが加わると複雑になるので頭が痛くなります。

使い方も簡単に説明していますので、色々いじってみてお気に入りのグラデーションが発見できればと思います。

ただ、グラデーションはIE9以下は対応していません。ですので、グラデーションの前にグラデーションではない色を指定しておくといいと思います。

そうすれば、グラデーションが対応していない場合はそちらの色で表示されます。

この記事は土日に書いて火曜日に投稿しようと思っていたわけですが、月曜日にWebクリエイターボックスさんで「美しいグラデーションをCSSで実装！配色に使える便利ツールや実例も！」という記事が。

ぱくったと思われそうですが、せっかく書いたのでそのまま投稿しました。で、言い訳がましく最後に書いてみました。

フィードやTwitterで最新情報をチェック

最新エントリーはフィードやTwitterでチェックできますので、ぜひご登録お願いします。

この記事に付いているタグの最新記事一覧

※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。ブログに費やせる時間が限られており、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解いただければ幸いです。