[CSS] linear-gradient – Meowriosity[ミャリオシティ]

CSS のlinear-gradient()は、要素全体を覆う線形のグラデーションを作成します。

background (background-image)、 border-image (border-image-source) プロパティの値として利用します。
また、background( background-image )で、画像と重ねたり、何種類ものグラデーションを重ねる事も可能です。

一般的に、ショートハンド(一括指定) background、border-image で利用されています。

同じテーマの記事

[CSS] linear-gradient
[CSS] repeating-linear-gradient

このページの目次

linear-gradient() Code DEMO
linear-gradient() の詳細

linear-gradient() Code DEMO

background:linear-gradient(90deg, #9c6aff, #56ceff, rgb(108,255,88));
background:linear-gradient(to bottom right, #e03 30%, #000 50%);
background:linear-gradient(to bottom, rgba(0,51,51,1) 0%, rgba(5,193,255,1) 50%, rgba(0,51,51,1) 100%);
background:linear-gradient(-45deg, transparent 0% 49%, rgba(255,0,0,0.5) 50%, rgba(0,255,0,0.2) 100%), linear-gradient(45deg, #ef0 0% 50%, #0cf 50% 100%);

他の値を持つ場合があります。詳細は以下をご確認下さい

background:linear-gradient(#f77 20%, #fc0 20% 40%, #af0 40% 60%, #0f5 60% 80%, #0df 80%);
background:linear-gradient(45deg, #000 10%, #e00 10% calc(10% + 5px), transparent calc(10% + 5px) calc(90% - 5px), #e00 calc(90% - 5px) 90%, #000 90%), linear-gradient(-45deg, #000 10%, #e00 10% calc(10% + 5px), #f9f9f9 calc(10% + 5px) calc(90% - 5px), #e00 calc(90% - 5px) 90%, #000 90%);

他の値を持つ場合があります。詳細は以下をご確認下さい

linear-gradient() の詳細

指定方法

指定したグラデーションで要素全体を覆うように適用されます (繰り返しはされません)

滑らかなグラデーション

「色の開始位置 ⇒ 次の色の開始位置」までの間、色変化しながら色を切り替えます。
数値の省略可 (色だけを指定した場合、各色を均等に配置します)

linear-gradient(

方向or角度, 

最初の色 数値(この色の開始位置), 

中間の色 数値(この色の開始位置), 

最後の色 数値(この色の開始位置)

);

以下の各項目を順にカンマで繋ぎます

方向(角度) ⇒ キーワード、数値など (“0deg=上から下” のみ省略可)
最初の色 ⇒ 「色スペース 0 又は数値(この色の開始位置)」(0は省略可)
要素の端(0)から開始位置まで最初の色で塗りつぶされます。
中間の色 ⇒ 「色スペース数値(この色の開始位置)」
2色目以降は、必要に応じ何個でも設定できます。
最後の色 ⇒「色スペース数値(この色の開始位置)」
最後の色の開始位置から要素端(100%)まで最後の色で塗りつぶされます。

明確に区切られた多色ストライプ

「色の終了位置・次の色の開始位置」を同じにする事で色を切り替えます。
数値の省略不可 (ストライプでは数値の省略はできません)

repeating-linear-gradient(

方向or角度, 

最初の色 終了(数値), 

中間の色 開始(最初終了と同じ数値) 終了(色開始 + 幅)

最後の色 開始(前色終了と同じ数値)

);

以下の各項目を順にカンマで繋ぎます

方向(角度) ⇒ キーワード、数値など (“0deg=上から下” のみ省略可)
最初の色 ⇒ 「色スペース数値(終了=この色の終了位置)」
要素の端(0)から終了位置まで最初の色で塗りつぶされます。
中間の色 ⇒ 「色スペース数値(開始=前色終了位置) スペース数値(終了=色開始+幅)」
2色目以降は、必要に応じ何個でも設定できます。
最後の色 ⇒「色スペース数値(開始=前色終了位置)」
最後の色の開始位置から要素端(100%)まで最後の色で塗りつぶされます。

※ linear-gradientで指定する距離(%や単位)は、要素に対する相対として機能します。

※ 固定単位で指定した場合でも、また、終了がどの位置であっても、グラデーションが繰り返される事はありません

※ 決まった色のグラデーションを繰り返したい場合は、repeating-linear-gradient を利用してください

利用できる値

単位

to キーワード: top, bottom, right, left

toに続けて、1つ又は 2つのキーワードで方向を指定
angle: deg,turn,

角度を使って方向を指定
相対単位: %

要素に対する相対単位。linear-gradient では%を利用する場合が多い
固定単位: px, em, cm

絶対単位。repeating-linear-gradient では固定単位を使用する場合が多い。

色指定

カラーネーム: red,green,

W3Cの仕様により定義されている147色
16進値: #000000,#000,

色を#rrggbb(#6桁) で表す。#rgb(#3桁) の短縮も可
RGB値: rgb(255,255,0)

色を [赤(0~255)], [緑(0~255)], [青(0~255)] で表す
RGB値+透過: rgba(255,255,0,0.5)

RGB値に、透過(0~1)をプラスしたもの
HSL値: hsl(200,20%,50%)

色を [色相(0~360)], [彩度(０～100%)], [輝度(０～100%)] で表す
HSL値+透過: hsla(200,20%,50%,0.5)

HSL値に、透過(0~1)をプラスしたもの
透明: transparent

背景色を透明にする

linear-gradient の複数指定

カンマ ‘ , ‘ で繋ぐことで、何個も重ねて指定する事ができます。
左(最初に書かれたもの)が一番上、右に行くほど下になります。

background: 
  linear-gradient(-45deg, transparent 0%,transparent 49%, rgba(255,0,0,0.3) 50%, rgba(0,255,0,0.3) 100%),
  linear-gradient(45deg, #ef0 0%, #ef0 49%, #0cf 50%, #0cf 100%);

linear-gradient 設定時の注意

background:、 background-image:、 border-image: の値として利用します。
その他の注意は各プロパティでご確認下さい。

ブラウザ対応状況 (2020/07/26 現在)

※より詳細な情報、最新情報、他バージョン対応などを確認されたい場合は Can I use 等のチェックサイトでお調べ下さいm(__)m

同じテーマの記事

[CSS] linear-gradient
[CSS] repeating-linear-gradient