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

CSS のrepeating-linear-gradient() は、グラデーションを繰り返し、要素全体を覆う線形ストライプを作成します。

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

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

同じテーマの記事

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

このページの目次

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

repeating-linear-gradient() Code DEMO

background:repeating-linear-gradient(#00d4ff 0 20px, #c6ff00 20px 40px);
background:repeating-linear-gradient(to right, #000 0px, #e00 20px, #00e 40px);
background:repeating-linear-gradient(-45deg, #ff3db6, #ff9a00 15%, #ceff00 25%);
background:repeating-linear-gradient(90deg, rgba(0,0,0,0.2), transparent 15px, rgba(0,0,0,0.2) 30px, #f39 30px 35px), repeating-linear-gradient(#f39 0 20px, #fd0 20px 40px);

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

background:repeating-linear-gradient(#f6f6f6 0 2em, #fff 2em 4em);
テキストの line-height と
グラデーション幅を合わせる事で
ノートのような罫線や
方眼紙風にも出来ます。
background:repeating-linear-gradient(#f7eca9 0 30px, #fff 30px 32px);
テキストの line-height と
グラデーション幅を合わせる事で
ノートのような罫線や
方眼紙風にも出来ます。
background:repeating-linear-gradient(transparent 0 31px, #f6f6f6 31px 32px), repeating-linear-gradient(90deg, #fff 0 31px, #f1f1f1 31px 32px);
テキストの line-height と
グラデーション幅を合わせる事で
ノートのような罫線や
方眼紙風にも出来ます。
background:repeating-linear-gradient(90deg, #fff 0 4px, transparent 4px 8px), repeating-linear-gradient(#fff 0 31px, #ddd 31px 32px);
テキストの line-height と
グラデーション幅を合わせる事で
ノートのような罫線や
方眼紙風にも出来ます。
共通code font-size: 16px; line-height: 32px;

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

repeating-linear-gradient() の詳細

指定方法

最後の指定位置が要素に対し100%未満の場合、指定したグラデーションを要素一杯になるまで繰り返します。

グラデーションで繰り返す場合

repeating-linear-gradient(

方向or角度, 

色1 0, 

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

色3 数値(この色の開始位置)

);

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

方向(角度) ⇒ キーワード、数値など (“0deg=上から下” のみ省略可)
開始 (色1) ⇒ 「色スペース 0 (省略可)」(0 又は省略以外不可)
2色目以降 ⇒ 「色スペース数値 (この色の開始位置)」
2色目以降は、必要に応じ何個でも設定できます。
※ 最後は、必ず「要素に対し100%未満」となるように設定。

明確なストライプで繰り返す場合

repeating-linear-gradient(

方向or角度, 

色1 0 数値2(幅), 

色2 数値1(色1数値2と同じ) 数値2(数値1 + 幅)

);

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

方向(角度) ⇒ キーワード、数値など (“0deg=上から下” のみ省略可 )
開始 (色1) ⇒「色スペース 0(省略不可) スペース数値2(色1の幅)」
2色目以降 ⇒「色スペース数値1(前色数値2) スペース数値2(数値1+この色の幅)」
2色目以降は、必要に応じ何個でも設定できます。
※ 最後は、必ず「要素に対し100%未満」となるように設定。

※ repeating-linear-gradientで指定する数値は、色同士の距離(巾)になります。

※ %で指定した場合でも、最後の位置が要素に対し100%未満の場合は、グラデーションが繰り返されます。

利用できる値

単位

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

背景色を透明にする

repeating-linear-gradient の複数指定

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

background: 
  repeating-linear-gradient(90deg, #fff, #fff 4px, transparent 4px, transparent 8px),
  repeating-linear-gradient(#fff, #fff 31px, #ddd 31px, #ddd 32px);

repeating-linear-gradient 設定時の注意

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

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

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

同じテーマの記事

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