本日はそんな方に向けて書いていきます。CSSの背景を指定するbackgroundプロパティにはlinear-gradientとradial-gradientという関数を使うことでグラデーションを作ることができます。関数の引数の設定やグラデーションの角度や位置を指定するのは少し難しかったりします。生成ツールを使ったり画像として貼り付けても問題ないのですが、皆さんが思っているよりずっと簡単な仕組みなので一度は練習してみると良いかもしれません。「左から右に色が変わる」「上から下に色が変わる」「円形に色が変わる」「斜めに色が混じる」といったバリエーションごとの書き方も例題で紹介するので知って得する話になるはずです。動画もあるので必要な方は一緒に活用してください。CSSのlinear-gradientでグラデーションを作る例えば背景色を2色にしてグラデーションにしたいときにlinear-gradientやradial-gradientを使います。それぞれbackgroundプロパティに対して使う関数で、linear-gradientでは以下のような書き方になります。16px;}linear-gradientの引数には「角度、1つ目の色、2つ目の色」という具合に設定します。角度というのは色が交わる角度のことです。Chromeの検証ツールでは角度ごとの変化を確認することができますので皆さんも触ってみてください。ちなみに0度と180度のように数字は違うけど傾き具合が同じ場合は、色の順番に違いが出ることを覚えておいてください。0度だと以下のようになります。一方で180度だと以下のようになります、傾きは一緒でもクルッと反転するわけなので色の位置は変わります。CSSのlinear-gradientとradial-gradientの違いグラデーションを作る方法は他にもあって、有名なものではradial-gradientも覚えておくと良いでしょう。こちらは円形にグラデーションを作るための関数で、以下のような使い方になります。16px;}第1引数には角度ではなく位置を指定するようになります。位置というのは放射線状になる中心をどこに配置するかということで、特定のキーワードが用意されています。center」がデフォルトになっていて真ん中が中心になります。以下のように変更してみます。16px;}CSSのlinear-gradientを使って背景画像にグレーをかける方法ここまでで2色をグラデーションにする方法を知ってもらいましたが、意外な使い道もあるので紹介します。背景画像にグレーをかけるときにもlinear-gradientが使えます。cover;}backgroundプロパティは「,」で区切って画像とグラデーションを一緒に指定することができます。linear-gradientで黒系の色をグラデーションすることで、背景画像にグレーをかけることができます。グレーをかける方法は他にもありますがグラデーション上のグレーをかけるにはlinear-gradientを使いましょう。通常であれば以下のような背景画像です。こちらに対して上記のコードのようにlinear-gradientを追加すると以下のようになります。グラデーションにしないグレーでも良い場合はlinear-gradientで同じ色を指定すれば結果的に単色になりますので可能です。rgba(0,0,0,0.5))とすればrgba(0,0,0,0.5)が全体にかかるので以下のような見た目になります。意外と使い道があることがわかってもらえたかと思います。最近では背景にグラデーションやグレーをかけることはデザイン業界としては当たり前になりましたので覚えておくと良いでしょう。今回参考にした本はこちらになります。