linear-gradient()の使い方３選

はじめに

学んだことを忘れないように備忘録として残しています

linear-gradient()は主にグラデーションを作るCSSプロパティです。
本記事ではそれ以外の使い方も併せてざっくりと紹介していきます。

1.グラデーションを作る

See the Pen Untitled by 柏木菜南 (@vccpppsz-the-flexboxer) on CodePen.

2.画像にフィルターをかける

linear-gradient()の開始色と終了色を同じ色にすれば、一色のフィルターをかけることができます。

【before】

See the Pen Untitled by 柏木菜南 (@vccpppsz-the-flexboxer) on CodePen.

【after】

See the Pen Untitled by 柏木菜南 (@vccpppsz-the-flexboxer) on CodePen.

3.マーカー線を引く

See the Pen Untitled by 柏木菜南 (@vccpppsz-the-flexboxer) on CodePen.

↑は0~75%が透明。75~100%がオレンジという意味。0と100%は下記のように省略してもOK

  .sample-marker { 
    background-image: linear-gradient(transparent 70%, #ffbb1e 70%); 
  }