[CSS] repeating-linear-gradient()関数で線形のグラデーションを繰り返して表示しよう!

1.repeating-linear-gradient()関数とは?

repeating-linear-gradient()関数は画像のデータ型で値を指定できるプロパティにおいて、繰り返される線形のグラデーションを表示します。

引数の指定方法は以下の通りです。

{ プロパティ: repeating-linear-gradient(引数); }

引数の指定方法

2.repeating-linear-gradient()関数の使い方

それではrepeating-linear-gradient()関数の使い方をみていきましょう。

.sample {
　repeating-linear-gradient(to left top, blue, red 20px);
}

上記の例では、 右下から左上に延び、青で始め赤で終わり、20px ごとに繰り返す反復グラデーションとなっています。

他にも値を設定できるのでいろいろと試してみることをお勧めします!