linear-gradient() : 線形グラデーション - CSSの設定値 - Web開発

概要へ移動

このページで解説するコードの実行結果。

実行結果

0
10

0
20

0
30

0
40

0
50

0
60

0
70

0
80

0
90

0
100

10
100

20
100

30
100

40
100

50
100

60
100

70
100

80
100

90
100

実行結果

0
100

10
90

20
80

30
70

40
60

50
50

40
50

30
50

20
50

10
50

0
50

複数色

３回繰り返す

傾ける／回転

0deg

30deg

60deg

90deg

120deg

150deg

180deg

210deg

240deg

270deg

300deg

330deg

360deg

to を使った指定

to top

to top right

to right

to bottom right

to bottom

to bottom left

to left

to top left

色を混ぜる

３色を重ねる

重ねる順番を変える

ちょっと変えた

デフォルト HTML & CSS

このページの実行結果には、以下のコードをデフォルトとして使用している。

CSS : デフォルトCSS


div {
    border:             1px solid gray;  /*  境界線 */
    width:              200px;           /*  幅 */     
    height:             200px;           /*  高さ */     
    display:            inline-block;    /*  横並び */
    vertical-align:     top;             /*  上揃え */
    margin:             3px;             /*  外側の余白 */
    background-color:   white;           /*  背景色 */
}

HTML : 適用するHTML


<div class="sample"></div>

実行結果

`linear-gradient()`関数の概要

background-imageプロパティにlinear-gradient()関数を設定すると、線形なグラデーションになる。

複数の色はカンマ「,」で指定する。

下は「上半分をred」「下半分をyellow」にする例。（redとyellowの境目(さかいめ)は真ん中）

CSS : linear-gradient


.sample  {
    background-image:   linear-gradient( red, yellow );
}

HTML : 適用するHTML


<div class="sample"></div>

実行結果

yellowの後ろに（カンマではなく）スペースでつなげて50%と書くと「上半分をredとyellowで分け」、「下半分はyellow」になる。

つまり、redとyellowの境目が「上から２５％（1／４）の位置」に来る。

CSS : yellow 50%


.sample  {
    background-image:   linear-gradient( red, yellow 50% );
}

境目は上から1／４

25%にすると「yellowだけの領域が（上から）25%の場所から始まる」ということ。

よって、redとyellowの境目は「上から１２．５％（1／８）の位置」になる。

CSS : yellow 25%


.sample  {
    background-image:   linear-gradient( red, yellow 25% );
}

境目は上から1／８

この設定は数値（＋単位）でも指定できる。

このボックスの高さは200pxである。よって、yellow 100pxと指定するとyellow 50%と同じことになる。

CSS : yellow 100px


.sample  {
    background-image:   linear-gradient( red, yellow 100px );
}

「yellow 50%」と同じ

yellow 50pxとすると、（50px ÷ 高さ200px = 0.25 = 25%なので）yellow 25%と同じことになる。

CSS : yellow 50px


.sample  {
    background-image:   linear-gradient( red, yellow 50px );
}

「yellow 25%」と同じ

次に、red 50%とする。（yellowには無指定）

この場合「上から５０％はredだけの領域」となるので、redとyellowの境目が上から７５％（３／４）の位置に来る。

CSS : red 50%


.sample  {
    background-image:   linear-gradient( red 50%, yellow );
}

境目は上から３／４

red 75%とすると、境目が上から７／８の位置に来る。

CSS : red 75%


.sample  {
    background-image:   linear-gradient( red 75%, yellow );
}

境目は上から７／８

red 150pxはred 75%と指定するのと同じ。（150px ÷ 高さ200px = 0.75 = 75%なので）

CSS : red 150px


.sample  {
    background-image:   linear-gradient( red 150px, yellow );
}

red 75% と同じ

最後に両方指定した場合。

red 40%, yellow 60%とする。

「0 ～ 40%」のところはredのみ、「60% ～ 100%」のところはyellowのみとなる。

残った「40% ～ 60%」の領域のみがグラデーションになる。

CSS : red 40%, yellow 60%


.sample  {
    background-image:   linear-gradient( red 40%, yellow 60% );
}

両方指定

下はred, yellowのみの指定。上の結果の方が滲(にじ)んでいる領域が少ない。

CSS : linear-gradient


.sample  {
    background-image:   linear-gradient( red, yellow );
}

実行結果

まとめる。sample-0-100クラスが無指定（デフォルト）の状態。

CSS : まとめ


.sample-0-10    { background-image:   linear-gradient( red    , yellow 10% ); }
.sample-0-20    { background-image:   linear-gradient( red    , yellow 20% ); }
.sample-0-30    { background-image:   linear-gradient( red    , yellow 30% ); }
.sample-0-40    { background-image:   linear-gradient( red    , yellow 40% ); }
.sample-0-50    { background-image:   linear-gradient( red    , yellow 50% ); }
.sample-0-60    { background-image:   linear-gradient( red    , yellow 60% ); }
.sample-0-70    { background-image:   linear-gradient( red    , yellow 70% ); }
.sample-0-80    { background-image:   linear-gradient( red    , yellow 80% ); }
.sample-0-90    { background-image:   linear-gradient( red    , yellow 90% ); }
.sample-0-100   { background-image:   linear-gradient( red    , yellow ); }
.sample-10-100  { background-image:   linear-gradient( red 10%, yellow ); }
.sample-20-100  { background-image:   linear-gradient( red 20%, yellow ); }
.sample-30-100  { background-image:   linear-gradient( red 30%, yellow ); }
.sample-40-100  { background-image:   linear-gradient( red 40%, yellow ); }
.sample-50-100  { background-image:   linear-gradient( red 50%, yellow ); }
.sample-60-100  { background-image:   linear-gradient( red 60%, yellow ); }
.sample-70-100  { background-image:   linear-gradient( red 70%, yellow ); }
.sample-80-100  { background-image:   linear-gradient( red 80%, yellow ); }
.sample-90-100  { background-image:   linear-gradient( red 90%, yellow ); }

div {
    width:              3em;           /*  幅 */   
}

HTML : 適用するHTML


<div class="sample-0-10"> 0  <br> 10 </div>
<div class="sample-0-20"> 0  <br> 20 </div>
<div class="sample-0-30"> 0  <br> 30 </div>
<div class="sample-0-40"> 0  <br> 40 </div>
<div class="sample-0-50"> 0  <br> 50 </div>
<div class="sample-0-60"> 0  <br> 60 </div>
<div class="sample-0-70"> 0  <br> 70 </div>
<div class="sample-0-80"> 0  <br> 80 </div>
<div class="sample-0-90"> 0  <br> 90 </div>
<div class="sample-0-100">  0  <br> 100 </div>
<div class="sample-10-100"> 10 <br> 100 </div>
<div class="sample-20-100"> 20 <br> 100 </div>
<div class="sample-30-100"> 30 <br> 100 </div>
<div class="sample-40-100"> 40 <br> 100 </div>
<div class="sample-50-100"> 50 <br> 100 </div>
<div class="sample-60-100"> 60 <br> 100 </div>
<div class="sample-70-100"> 70 <br> 100 </div>
<div class="sample-80-100"> 80 <br> 100 </div>
<div class="sample-90-100"> 90 <br> 100 </div>

実行結果

0
10

0
20

0
30

0
40

0
50

0
60

0
70

0
80

0
90

0
100

10
100

20
100

30
100

40
100

50
100

60
100

70
100

80
100

90
100

その２。

CSS : まとめ２


.sample-0-100  { background-image:   linear-gradient( red    , yellow     ); }
.sample-10-90  { background-image:   linear-gradient( red 10%, yellow 90% ); }
.sample-20-80  { background-image:   linear-gradient( red 20%, yellow 80% ); }
.sample-30-70  { background-image:   linear-gradient( red 30%, yellow 70% ); }
.sample-40-60  { background-image:   linear-gradient( red 40%, yellow 60% ); }
.sample-50-50  { background-image:   linear-gradient( red 50%, yellow 50% ); }
.sample-40-50  { background-image:   linear-gradient( red 40%, yellow 50% ); }
.sample-30-50  { background-image:   linear-gradient( red 30%, yellow 50% ); }
.sample-20-50  { background-image:   linear-gradient( red 20%, yellow 50% ); }
.sample-10-50  { background-image:   linear-gradient( red 10%, yellow 50% ); }
.sample-0-50   { background-image:   linear-gradient( red    , yellow 50% ); }


div {
    width:              3em;           /*  幅 */   
}

HTML : 適用するHTML


<div class="sample-0-100">  0   <br> 100</div>
<div class="sample-10-90">  10  <br> 90 </div>
<div class="sample-20-80">  20  <br> 80 </div>
<div class="sample-30-70">  30  <br> 70 </div>
<div class="sample-40-60">  40  <br> 60 </div>
<div class="sample-50-50">  50  <br> 50 </div>
<div class="sample-40-50">  40  <br> 50 </div>
<div class="sample-30-50">  30  <br> 50 </div>
<div class="sample-20-50">  20  <br> 50 </div>
<div class="sample-10-50">  10  <br> 50 </div>
<div class="sample-0-50">   0   <br> 50 </div>

実行結果

0
100

10
90

20
80

30
70

40
60

50
50

40
50

30
50

20
50

10
50

0
50

`repeating-linear-gradient()`関数

復習。redとyellowで半分に分ける。

CSS : linear-gradient


.sample  {
    background-image:   linear-gradient( red, yellow );
}

実行結果

最後のyellowを50%にすると、下部５０％はyellowになる。

CSS : yellow 50%


.sample  {
    background-image:   linear-gradient( red, yellow 50% );
}

実行結果

linear-gradientをrepeating-linear-gradientに変更すると繰り返しになる。

50%を指定しているので、２回繰り返す。

CSS : repeating-linear-gradient


.sample  {
    background-image:   repeating-linear-gradient( red, yellow 50% );
}

実行結果

これは100pxを指定するのと同じである。（高さ200pxの50%は100px）

CSS : yellow 100px


.sample  {
    background-image:   repeating-linear-gradient( red, yellow 100px );
}

実行結果

50pxを指定すると４回繰り返す。（高さ200px ÷ 50px = ４回）

※ これは25%と指定するのと同じ。

CSS : yellow 50px


.sample  {
    background-image:   repeating-linear-gradient( red, yellow 50px );
}

実行結果

割り切れない値を設定すると、途中で切れる。（高さ200px ÷ 80px = ２回あまり 40px）

CSS : yellow 80px


.sample  {
    background-image:   repeating-linear-gradient( red, yellow 80px );
}

実行結果

複数の色を指定

３色の色を指定する。それぞれ１／３に分ける。

CSS : ３色


.sample  {
    background-image:   linear-gradient( red, yellow, green );
}

実行結果

blueを加えて４色にする。それぞれ２５％に分けられる。

CSS : ４色


.sample  {
    background-image:   linear-gradient( red, yellow, green, blue );
}

実行結果

yellow 75%と指定する。「上部の７５％をredとyellowで半分に分け」、「残りの２５％をgreenとblueが分ける」ことになる。

CSS : yellow 75%


.sample  {
    background-image:   linear-gradient( red, yellow 75%, green, blue );
}

実行結果

加えてred 50%にする。上部５０％がred、５０％～７５％がyellow、残りにgreenとblueになる。

CSS : red 50%


.sample  {
    background-image:   linear-gradient( red 50%, yellow 75%, green, blue );
}

実行結果

もちろん、同じ色を複数回指定しても良い。

red, yellow, yellowは、

CSS : red 50%


.sample  {
    background-image:   linear-gradient( red, yellow, yellow );
}

実行結果

red, yellow 50% と同じである。

CSS : yellow 50%


.sample  {
    background-image:   linear-gradient( red, yellow 50% );
}

実行結果

しかし、ややこしいので推奨しない。

`repeating-linear-gradient`に複数指定

復習。 linear-gradientの３色指定。

CSS : ３色


.sample  {
    background-image:   linear-gradient( red, yellow, green );
}

実行結果

最後のgreenを50%にすると、下部５０％はgreenになる。

CSS : green 50%


.sample  {
    background-image:   linear-gradient( red, yellow, green 50% );
}

実行結果

linear-gradientをrepeating-linear-gradientに変更すると繰り返しになる。

CSS : repeating-linear-gradient


.sample  {
    background-image:   repeating-linear-gradient( red, yellow, green 50% );
}

実行結果

ちなみにrepeating-linear-gradientを使う場合、開始と終了の色を同じにすると見た目が良い。

最後のgreenをredに変更してみる。

CSS : repeating-linear-gradient


.sample  {
    background-image:   repeating-linear-gradient( red, yellow, red 50% );
}

実行結果

三回繰り返すには、33%にする。

CSS : repeating-linear-gradient


.sample  {
    background-image:   repeating-linear-gradient( red, yellow, red 33% );
}

実行結果

たとえば、yellow 10%にしたり、

CSS : repeating-linear-gradient


.sample  {
    background-image:   repeating-linear-gradient( red, yellow 10%, red 33% );
}

実行結果

orangeを足してみたりするとパターンが変わる。

CSS : repeating-linear-gradient


.sample  {
    background-image:   repeating-linear-gradient( red, yellow, orange, red 33% );
}

実行結果

傾ける

下記で説明することをまとめておく。

`deg`	`to`	デフォルト
`0deg`	`to top`
`45deg`	`to top right`
`90deg`	`to right`
`135deg`	`to bottom right`
`180deg`	`to bottom`	○
`225deg`	`to bottom left`
`270deg`	`to left`
`315deg`	`to top left`

まず復習。

CSS : linear-gradient


.sample  {
    background-image:   linear-gradient( red, yellow );
}

実行結果

傾けるには、色の前に傾ける角度を指定する。（その後ろにカンマ「,」が必要。）

とりあえず、横に傾ける。９０°（90deg）を指定。

CSS : 90deg


.sample  {
    background-image:   linear-gradient( 90deg, red, yellow );
}

実行結果

180deg。逆(さか)さまになりそうだが、そうでもないらしい。無指定と同じ

CSS : 180deg


.sample  {
    background-image:   linear-gradient( 180deg, red, yellow );
}

実行結果

270deg。90degとは左右逆になっている。

CSS : 270deg


.sample  {
    background-image:   linear-gradient( 270deg, red, yellow );
}

実行結果

３０°ずつ傾けてみる。なんと、0degor360degの時に逆さまになっている。つまり、逆さまから始まり、逆さまで終わる。

CSS : 30°ずつ


.deg0    {    background-image:   linear-gradient( 0deg, red, yellow );   }
.deg30   {    background-image:   linear-gradient( 30deg, red, yellow );   }
.deg60   {    background-image:   linear-gradient( 60deg, red, yellow );   }
.deg90   {    background-image:   linear-gradient( 90deg, red, yellow );   }
.deg120  {    background-image:   linear-gradient( 120deg, red, yellow );   }
.deg150  {    background-image:   linear-gradient( 150deg, red, yellow );   }
.deg180  {    background-image:   linear-gradient( 180deg, red, yellow );   }
.deg210  {    background-image:   linear-gradient( 210deg, red, yellow );   }
.deg240  {    background-image:   linear-gradient( 240deg, red, yellow );   }
.deg270  {    background-image:   linear-gradient( 270deg, red, yellow );   }
.deg300  {    background-image:   linear-gradient( 300deg, red, yellow );   }
.deg330  {    background-image:   linear-gradient( 330deg, red, yellow );   }
.deg360  {    background-image:   linear-gradient( 360deg, red, yellow );   }

div {
    width:              70px;           /*  幅 */ 
    height:             70px;           /*  高さ */ 
}

HTML : 適用するHTML


<div class="deg0">      0deg  </div>
<div class="deg30">     30deg  </div>
<div class="deg60">     60deg  </div>
<div class="deg90">     90deg  </div>
<div class="deg120">    120deg  </div>
<div class="deg150">    150deg  </div>
<div class="deg180">    180deg  </div>
<div class="deg210">    210deg  </div>
<div class="deg240">    240deg  </div>
<div class="deg270">    270deg  </div>
<div class="deg300">    300deg  </div>
<div class="deg330">    330deg  </div>
<div class="deg360">    360deg  </div>

実行結果

0deg

30deg

60deg

90deg

120deg

150deg

180deg

210deg

240deg

270deg

300deg

330deg

360deg

`to` を使った指定

to rightにすると、左から右へ。90degと同じ。

CSS : to right


.sample  {
    background-image:   linear-gradient(to right, red, yellow);
}

実行結果

to leftにすると、右から左へ。270degと同じ。

CSS : to left


.sample  {
    background-image:   linear-gradient(to left, red, yellow);
}

実行結果

to topにすると、下から上へ。0degと同じ。

CSS : to top


.sample  {
    background-image:   linear-gradient(to top, red, yellow);
}

実行結果

to bottomにすると、上から下へ。180degと同じ。（デフォルト＝無指定と同じ）

CSS : to bottom


.sample  {
    background-image:   linear-gradient(to bottom, red, yellow);
}

実行結果

縦方向と横方向の２つを設定することもできる。

`to top right`	`45deg`と同じ
`to bottom right`	`135deg`と同じ
`to bottom left`	`225deg`と同じ
`to top left`	`315deg`と同じ

CSS : ２つ指定する


.top          { background-image:   linear-gradient( to top          , red, yellow ); }
.top-right    { background-image:   linear-gradient( to top right    , red, yellow ); }
.right        { background-image:   linear-gradient( to right        , red, yellow ); }
.bottom-right { background-image:   linear-gradient( to bottom right , red, yellow ); }
.bottom       { background-image:   linear-gradient( to bottom       , red, yellow ); }
.bottom-left  { background-image:   linear-gradient( to bottom left  , red, yellow ); }
.left         { background-image:   linear-gradient( to left         , red, yellow ); }
.top-left     { background-image:   linear-gradient( to top left     , red, yellow ); }


div {
    width:              8em;          /*  幅 */   
    height:             5em;          /*  高さ */   
}

HTML : 適用するHTML


<div class="top">           to top          </div>
<div class="top-right">     to top right    </div>
<div class="right">         to right        </div>
<div class="bottom-right">  to bottom right </div>
<div class="bottom">        to bottom       </div>
<div class="bottom-left">   to bottom left  </div>
<div class="left">          to left         </div>
<div class="top-left">      to top left     </div>

実行結果

to top

to top right

to right

to bottom right

to bottom

to bottom left

to left

to top left

色を混ぜる

これと

CSS : linear-gradient


.sample  {
    background-image:   linear-gradient( red, yellow );
}

実行結果

これを

CSS : 90deg


.sample  {
    background-image:   linear-gradient( 90deg, #333, white );
}

実行結果

混ぜてみる。

混ぜるには、linear-gradient()をカンマ「,」でつなぐ。

CSS : ２つ指定


.sample  {
    background-image:   linear-gradient( red, yellow ),
                linear-gradient( 90deg, #333, white );
}

混ざらない

１つ目の設定が優先され、混ざらない。これは「色が半透明」でないから。

半透明にするには、色をrgba()関数で指定する必要がある。

redは rgb( 255, 0, 0 )である。

カラーコード	`r`	`g`	`b`	`rgb()`
`red`	255	0	0	`rgb( 255, 0, 0 )`

これを使って書き直す。

CSS : linear-gradient


.sample  {
    background-image:   linear-gradient( rgb( 255, 0, 0 ), yellow );
}

実行結果

これをrgba()にして、不透明度を0.4（40%）にする。

CSS : linear-gradient


.sample  {
    background-image:   linear-gradient( rgba( 255, 0, 0, 0.4 ), yellow );
}

赤は半透明になった

これをlinear-gradient( 90deg, #333, white );に重ねる。

CSS : ２つ指定（赤は半透明）


.sample  {
    background-image:   linear-gradient( rgba( 255, 0, 0, 0.4 ), yellow ),
                linear-gradient( 90deg, #333, white );
}

混じった

上部のredは半透明であるので、下の色が透けて見える。

左側が暗く、右側が明るいので、上部左側が暗く、上部右側が明るく見える。

下部のyellowは不透明なので黄色に見える。

このように、３色（のような）グラデーションを作ることができた。

さらなる実験

次に、重ねる順番を変えてみる。モノクロを上にする。（半透明ではないのでモノクロになる）

CSS : 重ねる順番を変える


.sample  {
    background-image:   linear-gradient( 90deg, #333, white ),
                linear-gradient( red, yellow );
}

実行結果

モノクロを半透明（0.3）にする。

カラーコード	`r`	`g`	`b`	`rgb()`	`rgba( , 0.3 )`
`#333`	51	51	51	`rgb( 51, 51, 51 )`	`rgba( 51, 51, 51, 0.3 )`
`white`	255	255	255	`rgb( 255, 255, 255 )`	`rgba( 255, 255, 255, 0.3 )`

CSS : モノクロを半透明に


.sample  {
    background-image:   linear-gradient( 90deg, rgba( 51, 51, 51, 0.3 ), rgba( 255, 255, 255, 0.3 ) ),
                linear-gradient( red, yellow );
}

実行結果

回転を90degから60degに変えると少し和(やわ)らぐ

CSS : 60deg


.sample  {
    background-image:   linear-gradient( 60deg, rgba( 51, 51, 51, 0.3 ), rgba( 255, 255, 255, 0.3 ) ),
                linear-gradient( red, yellow );
}

実行結果

`transparent`を使ってみる。

transparentは完全な透明であり、rgba()で表すとrgba( n, n, n, 0 )と同じである。（透明なのでnが何であっても関係ない）

よって、これ（red）と

CSS : red


.sample  {
    background-image:   linear-gradient( to top right, transparent 20%, red  );
}

実行結果

これ（lime）と

CSS : lime


.sample  {
    background-image:   linear-gradient( to top left , transparent 20%, lime );
}

実行結果

これ（blue）を合わせると

CSS : blue


.sample  {
    background-image:   linear-gradient( to bottom   , transparent 20%, blue );
}

実行結果

こうなる。（red→lime→blueの順）

CSS : 重ねる


.sample  {
    background-image:   linear-gradient( to top right, transparent 20%, red ),
                linear-gradient( to top left , transparent 20%, lime ),
                linear-gradient( to bottom   , transparent 20%, blue );
}

実行結果

重ねる順番で結果が変わることに注意。（lime→red→blueの順）

CSS : 順番を変える


.sample  {
    background-image:   linear-gradient( to top left , transparent 20%, lime ),
                linear-gradient( to top right, transparent 20%, red ),
                linear-gradient( to bottom   , transparent 20%, blue );
}

実行結果

20%、to bottomのところを少し変えて調整してみる。

CSS : 調整


.sample  {
    background-image:   linear-gradient( to top left , transparent 40%,  lime ),
                linear-gradient( to top right, transparent 10%,  red ),
                linear-gradient( 220deg      , transparent,      blue );
}

実行結果

`linear-gradient()` : 線形グラデーション CSSの設定値

`linear-gradient()`関数の概要

`repeating-linear-gradient()`関数

複数の色を指定

`repeating-linear-gradient`に複数指定

傾ける

`to` を使った指定

色を混ぜる

さらなる実験

`transparent`を使ってみる。

リンク

linear-gradient()関数の概要

repeating-linear-gradient()関数

複数の色を指定

repeating-linear-gradientに複数指定

傾ける

to を使った指定

色を混ぜる

さらなる実験

transparentを使ってみる。

リンク

`linear-gradient()`関数の概要

`repeating-linear-gradient()`関数

`repeating-linear-gradient`に複数指定

`to` を使った指定

`transparent`を使ってみる。