美しいグラデーションをCSSで実装!配色に使える便利ツールや実例も!

thumb_gradient

背景に動画を使ったWebサイトや、大きな背景画像を使ったWebサイトに続き、最近は画面全体にきれいなグラデーションカラーを用いたサイトを見かける機会が増えてきました。そこで今回はグラデーションカラーをCSSで実装する基本的な方法から、画像に重ねる応用、配色選びに使えるサイト、実例集などを紹介します!

CSSでグラデーションを実装

グラデーションは background プロパティーに linear-gradient の値を使って色を指定します。意外と簡単。

body {
  background: linear-gradient(#05FBFF, #1E00FF);
}

See the Pen CSS linear-gradient by Mana (@manabox) on CodePen.

角度を変更

deg で角度を指定できます。マイナスの値もOK。横から、斜めから、様々な角度からお試しください ;)

body {
  background: linear-gradient(-135deg, #E4A972, #9941D8);
}

See the Pen CSS linear-gradient with angle by Mana (@manabox) on CodePen.

円形グラデーション

直線上に伸びるグラデーションではなく、円形のグラデーションを実装するには linear-gradient ではなく radial-gradient を使います。

body {
  background: radial-gradient(#F2B9A1, #EA6264);
}

See the Pen CSS radial-gradient by Mana (@manabox) on CodePen.

グラデーションオーバーレイ

グラデーションを使っているWebサイトをいろいろと見てまわりましたが、画像にグラデーションを重ねて背景画像として設定しているサイトを多く目にしました。画像自体に色を重ねているサイトもありましたが、この効果もCSSだけで表現可能です。

CSS3では background プロパティーの値をカンマで区切ることで、ひとつの要素に複数の背景を設定できます。それを利用してグラデーションカラーには rgba で透明度を指定し、次に背景画像を指定すれば画像に色を重ねられるわけです。CSSを利用すれば手軽に色の変更ができますし、アニメーション等のエフェクトも加えられます!background-size: cover; を記述すれば、背景画像が画面いっぱいに表示されますよ。

body {
  background: linear-gradient(-45deg, rgba(246, 255, 0, .8), rgba(255, 0, 161, .8)),
  url(images/bg-cherrybrossam.jpg);
  background-size: cover;
}

See the Pen CSS gradient with background image by Mana (@manabox) on CodePen.

配色アイデア

shade
最近個人的によく利用する、グラデーション生成サイトのshade。ベースカラーを設定した後、色相や彩度、明るさ、グラデーションの度合い等を調整して、色のカスタマイズができます。CSSも同時に表示されるため、コピペで背景色として記述可能。

uigradients
uiGradientsもきれいなグラデーションを提案してくれるサイト。左右カーソルでランダムに表示されます。 enter キーでCSSコードが表示されます。ベンダープレフィックス付のコードも含まれていますが、最新のモダンブラウザーならベンダープレフィックスなしでOK。

ios7-colours
iOS 7 colorsはiOS7風のグラデーション見本。カラーコードもついていて便利ですが、背景全体におくとどぎつい配色もあり。使いドコロを見極めましょう…。

colourful-guradient
グラデーション見本を集めたTumblr、colorful gradients。カラーコードが表示されないのが少し使いづらいのですが、渋い配色もあって参考になります。

便利なツール

css-gradient-animator
CSS Gradient Animatorを使えば、徐々に変化するグラデーションを実装するためのCSSコードを手軽に生成できます。パネルの左側から animation プロパティーで使用するアニメーション名を設定し、グラデーションの角度やスピード、配色を決めます。「Preview」ボタンでデモを表示。
CSSアニメーションについては、過去記事「CSS3アニメーションに挑戦!色が移り変わる背景を実装しよう」でも紹介しているので、そちらもご覧ください :)

shards
Shardsはマルチレイヤーなグラデーションを用いた背景を生成するjQueryプラグイン。

$('.bg').shards([0,0,0,.5],[255,0,0,.2],[255,255,0,.1],10,2,2,.1,true);

コード記述例。より詳しい設置方法はGithubページを参考にしてください。

グラデーションが美しいWebサイトいろいろ

様々なテクニックを使ってグラデーションを表現している実例を紹介します。デザインの参考にしてみてください!

winshape
WinShape Camps
画面いっぱいに背景として置かれた動画の上に、鮮やかなグラデーションが重なってとってもきれい!CSSフィルターの hue-rotate とCSSアニメーションで色相を変化させています。さらに opacity0.5 にして動画に重ねて表示。

See the Pen Colourful gradient animation by Mana (@manabox) on CodePen.


アニメーション部分を抽出するとこんな感じ↑でした。アニメーションが動いて見えない方は、デモ画面右下の「RETURN」または右上の「Edit on CODEPEN」をクリックしてご覧ください。CodePenアカウントをお持ちの方はフォークしてあれこれ試してみると面白いですよ!

pixel-palace
Pixel Palace
見出しにも適応されているグラデーションに注目!見出しに背景色としてグラデーションカラーを指定し、-webkit-background-clip: text; を使ってテキストでマスクをかけています。

See the Pen Gradation Text by Mana (@manabox) on CodePen.


以前「テキスト周りで使えるCSSの小技いろいろ」という記事で紹介した方法ですね。こちらはそこで紹介したデモ&コード。

niek
Niek Dekker Interactive Designer
ふわふわと変化する背景色がきれい!ぼかしのある背景画像の色みを、前述した hue-rotate とCSSアニメーションで変化させています。

nbsp
NBSP.
背景画像は background-size: cover; で全面表示しているので、横幅を変更しても画面にピッタリフィットして表示されます。画面いっぱいに表示したいときに使える小技ですね。

lovemessage
LOVE MESSAGE
紫からピンクという、朝焼けを彷彿させるグラデーション。少しずつ変化していく色合いも気持ちいいです。

cook
Cook
グラデーション背景と白背景を交互に繰り返し、爽やかな印象に。

loubsol
Loubsol
商品のデザインに合わせて背景色を変更。鮮やかな色彩が印象的です。

taste
Taste Creative
メンバーの写真にグラデーションを重ねています。グラデーションを背景に使っているWebサイトが多く見られましたが、このようにアクセントとして使っても素敵。

qards
Qards
ほんのりと模様のついた背景に、青や赤、緑などのグラデーション。セクションごとに色を変えています。

3min
3Minute inc.
女性の動画の上にグラデーション。赤系や青系など、ランダムに色合いが変わるみたいです。

canaltp
Canal TP
フラットベースのイラストと、わずかなグラデーションの組み合わせがかわいらしいデザイン。

atom
ATOM
共通の背景パターンを使い、エリアごとに色合いを変化させて表示。グラデーション+パターンも人気ですね。

ingramcoleland
Ingram Cole & Land
大きな背景画像にオーバーレイさせたグラデーションが美しい。写真下部のギザギザ好きです。

gifn
Gifn.it
こちらも動画の上にグラデーションをプラス。エリアごとに色合いを変えています。

impossible
Impossible Bureau
要素にカーソルをあわせた時の紫からピンクにかけたグラデーションがきれい。カーソルの位置で色合いが変化します!

studiojq
STUDIOJQ
灰色から赤という絶妙な配色を、写真にオーバーレイさせて全面に配置。


CSSだけで表現できる幅が増え、フラットデザインから脱皮しつつある昨今のWebデザイン。今後のトレンドにも注目ですね。

シェアする

コメント

  • http://2001y.blog.jp 2001 Y

    こんばんは!
    毎回見てるわけではないですが、ブログのデザインを頑張る時に調べているとよく出てきて、毎回デザインが美しいなぁあ〜って思いながら、読ませていただいてる2001Yです。。

    今回は、こちらの記事を参考に、背景にグラデーションをかけることができました!
    いつもながら大変感謝してます!

  • http://2001y.blog.jp 2001 Y

    と言った直後なのですがww
    途中で繰り返しになっちゃうんですね。。。
    ページのトップと一番下を色指定してできるものなどはないのでしょうか?

  • http://webcreatorbox.com Webクリエイターボックス

    折り返し、とは?
    グラデーションを固定するなら、一番最初のデモのように fixed を追加するとできます。
    http://codepen.io/manabox/pen/azKQVb

  • http://2001y.blog.jp 2001 Y

    あ!そういうことですか。大変感謝です!何せ、HTMLもCSSもJavaScriptも勉強中。。。
    また何かの機会によろしくお願いいたします。