見出し画像

CSSでグラデーションをつくる方法

こんにちは、ちゃるです😀
今日はCSSでグラデーションをつくる方法について調べました!

CSSでグラデーションを設定するには、background-imageプロパティを使用します。次のようなコードを記述します。

#grad {
  background-image: linear-gradient(red, yellow);
}

このコードでは、#gradというIDを持つ要素の背景にリニアグラデーションが設定されます。リニアグラデーションは、色が1色から別の色へ繰り返し変化するようなグラデーションです。上の例では、赤から黄色へ変化します。

もし、円形グラデーションが必要な場合は、radial-gradient関数を使用します。例えば、次のようなコードです。

#grad {
  background-image: radial-gradient(red, yellow);
}

このコードでは、円形グラデーションが設定されます。円形グラデーションは、中心から色が外側に向けて変化します。


サポートをいただいたらスクールに通ったり参考書を買ったりしたいと思います。支援をお待ちしています😀


この記事が気に入ったらサポートをしてみませんか?