CodePen.グラデーションオーバーレイグラデーションを使っているWebサイトをいろいろと見てまわりましたが、画像にグラデーションを重ねて背景画像として設定しているサイトを多く目にしました。画像自体に色を重ねているサイトもありましたが、この効果もCSSだけで表現可能です。プロパティーの値をカンマで区切ることで、ひとつの要素に複数の背景を設定できます。透明度を指定し、次に背景画像を指定すれば画像に色を重ねられるわけです。記述すれば、背景画像が画面いっぱいに表示されますよ。CodePen.配色アイデア最近個人的によく利用する、グラデーション生成サイトのshade。ベースカラーを設定した後、色相や彩度、明るさ、グラデーションの度合い等を調整して、色のカスタマイズができます。CSSも同時に表示されるため、コピペで背景色として記述可能。uiGradientsもきれいなグラデーションを提案してくれるサイト。左右カーソルでランダムに表示されます。キーでCSSコードが表示されます。ベンダープレフィックス付のコードも含まれていますが、最新のモダンブラウザーならベンダープレフィックスなしでOK。colorsはiOS7風のグラデーション見本。カラーコードもついていて便利ですが、背景全体におくとどぎつい配色もあり。使いドコロを見極めましょう...。カラーコードが表示されないのが少し使いづらいのですが、渋い配色もあって参考になります。Animatorを使えば、徐々に変化するグラデーションを実装するためのCSSコードを手軽に生成できます。プロパティーで使用するアニメーション名を設定し、グラデーションの角度やスピード、配色を決めます。「Preview」ボタンでデモを表示。:)Shardsはマルチレイヤーなグラデーションを用いた背景を生成するjQueryプラグイン。$('.bg').shards([0,0,0,.5],[255,0,0,.2],[255,255,0,.1],10,2,2,.1,true);コード記述例。詳しい設置方法はGithubページを参考にしてください。グラデーションが美しいWebサイトいろいろ様々なテクニックを使ってグラデーションを表現している実例を紹介します。CSSアニメーションで色相を変化させています。して動画に重ねて表示。CodePen.アニメーション部分を抽出するとこんな感じ↑でした。CODEPEN」をクリックしてご覧ください。使ってテキストでマスクをかけています。CodePen.以前「テキスト周りで使えるCSSの小技いろいろ」という記事で紹介した方法ですね。こちらはそこで紹介したデモ&コード。CSSアニメーションで変化させています。全面表示しているので、横幅を変更しても画面にピッタリフィットして表示されます。画面いっぱいに表示したいときに使える小技ですね。MESSAGE紫からピンクという、朝焼けを彷彿させるグラデーション。変化していく色合いも気持ちいいです。Cookグラデーション背景と白背景を交互に繰り返し、爽やかな印象に。Loubsol商品のデザインに合わせて背景色を変更。鮮やかな色彩が印象的です。Creativeメンバーの写真にグラデーションを重ねています。グラデーションを背景に使っているWebサイトが多く見られましたが、このようにアクセントとして使っても素敵。Qardsほんのりと模様のついた背景に、青や赤、緑などのグラデーション。セクションごとに色を変えています。inc.女性の動画の上にグラデーション。赤系や青系など、ランダムに色合いが変わるみたいです。TPフラットベースのイラストと、わずかなグラデーションの組み合わせがかわいらしいデザイン。ATOM共通の背景パターンを使い、エリアごとに色合いを変化させて表示。グラデーション+パターンも人気ですね。Land大きな背景画像にオーバーレイさせたグラデーションが美しい。写真下部のギザギザ好きです。Gifn.itこちらも動画の上にグラデーションをプラス。エリアごとに色合いを変えています。Bureau要素にカーソルをあわせた時の紫からピンクにかけたグラデーションがきれい。カーソルの位置で色合いが変化します!STUDIOJQ灰色から赤という絶妙な配色を、写真にオーバーレイさせて全面に配置。CSSだけで表現できる幅が増え、フラットデザインから脱皮しつつある昨今のWebデザイン。今後のトレンドにも注目ですね。amこんばんは!毎回見てるわけではないですが、ブログのデザインを頑張る時に調べているとよく出てきて、毎回デザインが美しいなぁあ〜って思いながら、読ませていただいてる2001Yです。amと言った直後なのですがww途中で繰り返しになっちゃうんですね。pmあ!そういうことですか。感謝です!何せ、HTMLもCSSもJavaScriptも勉強中。何かの機会によろしくお願いいたします。ニュースレターWeb制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。中の人ってこんな人Webデザイナー+WebデベロッパーのManaです。日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作の学校を卒業。カナダやオーストラリア、イギリスの企業でWebデザイナーとして働きました。詳しく知りたいという方は詳細ページへ。@chibimanaでつぶやいてます。Webクリエイターボックス。