【CSS】hr 要素(水平線)をグラデーションにする

スポンサーリンク

CSS で hr 要素をグラデーションにするには次のように指定します。

例)太さ 3px、左端が「white」で、右端が「gray」になるグラデーション。


hr {
    height: 3px;
    background: linear-gradient(to right, white, gray);
    border: none;
}

この方法では、hr 要素をボックスとして考えます。

まず、高さ(hrの太さ)を height プロパティで指定し、 次に、背景色(グラデーション)を background プロパティ、linear-gradient() 関数で指定します。 最後に、ボーダーは必要ないので「border: none;」を指定します。

表示結果



このグラデーションの場合は linear-gradient() 関数の第一引数に「to right」を指定しています。 そのため左から右に向かってwhiteからgrayへのグラデーションとなります。

linear-gradient() 関数の使い方はこちらのページを参考にしてください。
参考記事:線形グラデーションを指定する liner-gradient()

サンプル

次のようなグラデーションも出来ます。

★ blue ⇒ red


background: linear-gradient(to right, blue, red);

★ blue ⇒ yellow ⇒ red


background: linear-gradient(to right, blue, yellow, red);

関連記事

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト