CSSで線形グラデーションを作る方法

こんにちは!
フェノメナの技術担当のレミです!

css-gradetion

今回は、CSSでグラデーションを作る方法を学んで行きましょう。

グラデーションを作るためのCSSプロパティは「linear-gradient」を使います。
記述方法のとおりです。

div {
    background: linear-gradient(<角度>,<色1>,<色2>);
}

例えば、カバー写真に使われてるグラデーションを再現するには、このような記述をします。

div {
    background: linear-gradient(45deg, rgb(255,200,150), rgb(100, 100, 255));
}

見ての通り、角度は「degree」の省略である「deg」で指定します。
そこで一つ、あまり知られてないコツですけど、角度は次の文字列でも指定可能です。

- 「to top」:下から上に

- 「to bottom」: 上から下に

- 「to left」:右から左に

- 「to right」:左から右に

- 同じ考え方で:「 to top right」、「 to top left」、「 to bottom right」、「 to bottom left」

また、二つだけの色だけでなく、<色>の宣言を付け足すと、3つ、4つなど、いくらでも、色と色のグラデーションが可能になります。

例えば:

div {
    background: linear-gradient(45deg, rgb(255,120,150), rgb(130, 100, 255), rgb(0, 195, 255));
}

・・・を書くと、この様になります:

css-gradetion2

パラメーターとして、変化位置をかえたりすることもできるので表現豊かなグラデーションを作成できます。
今回のグラデーションは、線形グラデーションといって直線的に色が変化します。
グラデーションのバリエーションとして、他にも円形グラデーション「radial-gradient」があります。
CSSに記述してグラデーションで遊んでみてください!

このブログから情報発信しているUIデザイン専門家集団のホームページ :
フェノメナエンターテインメント株式会社