美しいグラデーションをCSSで実装!配色に使える便利ツールや実例も!背景に動画を使ったWebサイトや、大きな背景画像を使ったWebサイトに続き、最近は画面全体にきれいなグラデーションカラーを用いたサイトを見かける機会が増えてきました。そこで今回はグラデーションカラーをCSSで実装する基本的な方法から、画像に重ねる応用、配色選びに使えるサイト、実例集などを紹介します! 背景に動画を使った Web サイトの作り方大きな背景画像を使った魅力的な Web サイトを作ろうCSS でグラデーションを実装グラデーションは background プロパティーに linear-gradient の値を使って色を指定します。意外と簡単。 body { background: linear-gradient(#05fbff, #1e00ff); } 角度を変更deg で角度を指定できます。マイナスの値も OK。
![美しいグラデーションをCSSで実装!配色に使える便利ツールや実例も!](https://cdn-ak-scissors.b.st-hatena.com/image/square/e5c4df0b5a5cadece85d87b6d039cb3f45e8633e/height=288;version=1;width=512/https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F2d1b8c905c1d447eb649028ca07253a8%2F8e472ac0e5b847dfa72af9c1e02d0ec6%2Fthumb_gradient1.jpg)