BLOG

【CSS】背景にグラデーションカラーをかける方法について解説!

【CSS】背景にグラデーションカラーをかける方法について解説!

最近は綺麗なグラデーションカラーを用いたサイトを見かける機会が増えてきました。そこで今回はCSSで背景にグラデーションカラーをかける方法をご紹介します。グラデーションを用いることにより、インパクトやオリジナリティの高いグラデーションデザインを取り入れてみてはいかがでしょうか?

グラデーションの種類について

グラデーションといえば、左から右にかけて色が変わったり、真ん中から外にかけて色が変わったりするイメージですよね。直線的に一方向に向かって色が変化していくものを線形グラデーションと言い、中心点から放射状に広がるように色が変化していくものを円形グラデーションと言います。色の変化が線形か円形かで書き方が変わってきますので、それぞれ確認していきましょう。

線形グラデーション書き方


background: linear-gradient(ここに色を指定);

円形グラデーション書き方

PAGE TOP