MENU
  • 資格関連
  • SEO
  • WordPress
  • HTML/CSS
  • 雑記
週末のトモゾウ
  • 資格関連
  • SEO
  • WordPress
  • HTML/CSS
  • 雑記
週末のトモゾウ
  • 資格関連
  • SEO
  • WordPress
  • HTML/CSS
  • 雑記
  1. ホーム
  2. HTML/CSS
  3. linear-gradient()の使い方まとめ。グラデーションアニメや装飾にも使える

linear-gradient()の使い方まとめ。グラデーションアニメや装飾にも使える

2023 4/09
HTML/CSS
2023年4月3日 2023年4月9日

linear-gradient(リニア・グラディエント)とは、CSSで背景(back-ground)に「線形グラデーション」を作成するためのCSS記述です。
基本的な記述は下記のようになっています。

background: linear-gradient(角度, 開始の色, 終了の色);

角度はdegで指定します。
角度は下図を参考にしてください。

linear-gradient 角度まとめ

そして開始と終了の色は、#から始まるカラーコードやrgbaで指定します。
また、2色グラデーションだけでなく、中間色を入れた3色などもできます。

色が変化していく方向や割合でグラデーションを記述する方法もありますが、この記事では詳細は割愛します。
記述例だけ紹介します。

background: linear-gradient(right, red 20%, green 60%, blue 90%);

基本的には、最初に方向を指定してから、グラデーションの色を決めていくdeg指定と同じです汗

目次

左から右へグラデーション(静止背景)

ピンク(#ff9ece)からスタートし、中間色のパープル(#ce9eff)を経て、ブルー(#9eceff)へと背景がグラデーションしています。

▼html/CSS

<div class="box01"></div>
.box01{
   height: 200px;
   width:60%;
   background: linear-gradient(45deg, #ff9ece 0%, #ce9eff 50%, #9eceff 100%)
}

背景のグラデーションをアニメーションで動かす

一個上の背景グラデーションを、アニメーションを使って動かします。

infiniteでアニメーションを無限にループさせ、alternateで左右交互に動かします。

▼HTML/CSS

<div class="box02"></div>
.box02{
   height: 200px;
   width:60%;
   background: linear-gradient(45deg, #ff9ece 0%, #ce9eff 50%, #9eceff 100%) 0 0 / 300% 100% repeat;
   animation: grade_anim 5s infinite alternate;
}

@keyframes grade_anim {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
}

グラデーションを繰り返し、ストライプ柄を作る

repeating-linear-gradientを使うことで、グラデーションを繰り返すことができます。
それを使い、ストライプ柄が作れます。
<div class="box05"></div>
.box05 {
   height: 300px;
   width:80%;
  background: repeating-linear-gradient(90deg, #ff9ece, #ff9ece 10px, #9eceff 5px, #9eceff 20px);
}

グラデーションの角度を指定する『90deg』を『0deg』にすれば、ボーダーになりますし、45度の『45deg』にすれば斜めストライプになります。

グラデーションを繰り返し、市松模様を作ってみる

background-blend-modeが背景を混ぜ合わせたりする(景色の写真の上に、セピアの色を重ねたりなど)ときに使うプロパティです。
そのプロパティをdifferenceにすると相違表示できます。

▼HTML/CSS

<div class="box03"></div>
.box03{
   height: 200px;
   width:60%;
   background-image: 
  repeating-linear-gradient(90deg, black 0 30px, white 30px 60px),
  repeating-linear-gradient(180deg, white 0 30px, black 30px 60px);
   background-blend-mode:difference;
}

background-blend-modeは他にも様々なプロパティがあり、オーバレイをかけたり、暗め合成、明るめ合成など選べます。

画像の上にグラデをかけてみる。

上のbackground-blend-modeとは少し違う感じで下部にグラデーションをかけて、画像の上に乗っているテキストを読みやすくします。
(背景のbackgroundに画像を入れるのではなく、普通にimgタグで画像いれてもいいですよ)

カピパラさん

▼HTML/CSS

<div class="box04"><span>カピパラさん</span></div>
.box04{
   height: 300px;
   width:80%;
   background-image: url(https://webkatsudou.com/wp-content/uploads/2023/04/kapi.jpg);
   background-position: 50% 50%;
   background-size: cover;
   position: relative;
}
.box04 span{
   color:#ffffff;
   position: absolute;
   top:90%;
   left:2%;
   z-index: 999;
}
.box04::after{
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, #2a2a2a 0%, #ce9eff00 30%, #9eceff00 100%);
}
HTML/CSS
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
  • おしゃれなCSSポイント見出しデザイン!簡単コピペで現場ですぐに使える!

この記事を書いた人

tomoのアバター tomo

資格試験やSEOなどについての情報を発信します。現在も資格試験や検定にチャレンジ中!実際に資格を勉強した上で、おススメの勉強方法や講義動画チャンネル、過去問サイトを紹介してます!
(仕事はWEBデザインとWEBマーケ)

この著者の記事一覧へ

関連記事

  • おしゃれなCSSポイント見出しデザイン!簡単コピペで現場ですぐに使える!
    2023年3月19日
  • イグアナ
    【JQuery】imgタグのsrcとdata-srcを画像書き換えて遅延読み込みさせる|ページスピード改善
    2023年3月12日
  • 要素がスクロールして画面に表示されたらCSSアニメーションを動かす方法【jQueryコピペ】
    2023年2月18日
  • 複数の背景画像(background-img)を自動的に切り替えるCSSアニメーション
    2022年12月29日
カテゴリー
  • HTML/CSS
  • SEO
  • WordPress
  • ガジェット
  • 副業・ポイ活
  • 資格関連
  • 雑記
目次
トモゾウ
埼玉在住でWEBデザイン(フロントエンドエンジニア)の仕事をしながら、いろんな資格試験に挑戦しています。

また、本業とは別にブログを運営してます。資格勉強で学んだことや、WEB(SEO/HTML/CSSなど)を発信中。
About
カテゴリー
  • HTML/CSS
  • SEO
  • WordPress
  • ガジェット
  • 副業・ポイ活
  • 資格関連
  • 雑記
検索
当ブログは「SWELL」を使用しています。
  • サイトマップ
  • プライバシーポリシー
  • お問い合わせ

© 2023 週末のトモゾウ

目次