2021/2/18 HTML&CSS辞典をオープンしました! コンテンツは随時更新します!

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

linear-gradient()関数の評価
頻出度
(5.0)
重要度
(5.0)
総合評価
(5.0)




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

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

linear-gradient()関数の引数は半角スペースとカンマで区切って指定します。

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

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

引数の指定方法

  • 任意の数値+単位
  • to top
  • to top right
  • to right
  • to bottom right
  • to bottom
  • to bottom left
  • to left
  • to top left
  • %値




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

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

.striped {
 background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
}

上記の例では、二つの色がグラデーションの中央である50%の色経由点を共有しています。

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




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です