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

美しいグラデーションをCSSで実装！配色に使える便利ツールや実例も！背景に動画を使ったWebサイトや、大きな背景画像を使ったWebサイトに続き、最近は画面全体にきれいなグラデーションカラーを用いたサイトを見かける機会が増えてきました。そこで今回はグラデーションカラーをCSSで実装する基本的な方法から、画像に重ねる応用、配色選びに使えるサイト、実例集などを紹介します！ 背景に動画を使った Web サイトの作り方大きな背景画像を使った魅力的な Web サイトを作ろうCSS でグラデーションを実装グラデーションは background プロパティーに linear-gradient の値を使って色を指定します。意外と簡単。 body { background: linear-gradient(#05fbff, #1e00ff); } 角度を変更deg で角度を指定できます。マイナスの値も OK。

[kikiki-kiki]

グラデーション

[NeGI]

“uiGradients”

[miyoom]

“linear-gradient(#05FBFF, #1E00FF);”

[hadzimme]

一つひとつの言葉が、ずっしり重い

[aiza_wai]

写真にグラデーション重ねたい時に見る。

[NEPPIE]

見てるだけで綺麗…。試してみたいです。

[y-yasukawa1236]

背景にグラディエーションを設定する方法。

[ozyakko]

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

[haruharujane]

“ Search コーディング CSS HTML5 WordPress jQuery SVG スマートフォン ”

[maco_h]

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

[nhiroki]

グラデーションがキレイ。なんかいつか使うかもかも

[glat_design]

良さ /

[naga_sawa]

グラデーションのいろいろ

[ufomap]

背景に動画を使ったWebサイトや、大きな背景画像を使ったWebサイトに続き、最近は画面全体にきれいなグラデーションカラーを用いたサイトを見かける機会が増えてきました。[Web Design][CSS3][Gradation]

[tokida]

美しいグラデーションをCSSで実装！配色に使える便利ツールや実例も！ - | 背景に動画を使ったWebサイトや、大きな背景画像を使ったWebサイトに続き、最近は画面全体にきれいなグラデーションカラーを用いたサイト…

[mr_bond]

グラデーションをCSSで表現するときは、IE用の書き方にも注意が必要

[z1a2nh]

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

[takahumi_nakano]

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

[kihan]

おされ

[kosigan]

いいなぁ、使ってみたい

[eatspiroshiki]

メモメモ

[masapon49]

楽したいｗ φ(｀д´)ﾒﾓﾒﾓ...

[exactman]

絶対

[k_gobo]

とにかくIE8やら9やらの目の黒いうちは何も出来ないのが日本の実情。

[hedeyoshi]

グラデーション！

[kussun]

うるさくない程度に取り入れたい。