cssで作るいろいろなグラデーション

PR　当ページのリンクには広告が含まれています。

鮮やかなグラデーションを取り入れたサイトをよく見ます。
様々なタイプのグラデーション記述方法をまとめてみました！

グラデーションの種類

• 基本

  グラデーションはbackgroundで指定します。先に書いた色が開始色（黄緑）、後の色が終了色（青緑）です。

  セレクタ{background: linear-gradient(#C0F9A3, #06AA61);}

   

• 角度

  30度の角度をつけた、黄色と水色のグラデーション。

  セレクタ{background:linear-gradient(30deg, #13F2F9, #FFE603);}

   

• 3色

  青、水色、ピンクの3色グラデーション。こちらは60％の部分まで青と水色のグラデーションという指定になります。

  セレクタ{background:linear-gradient(90deg,#0567F7,#7EF2FB 60%,#F874CB);}

   

• 円形

  円のグラデーションは「radial-gradient」というプロパティを使います。こちらは最初の色が中央色（白）、後の色が外側の色（水色）。

  セレクタ{background:radial-gradient(#FFF, #77C9F7);}

   

• オーバーレイ

  写真の上にグラデーションをかぶせました。画像が透けて見えるように、カラーはrgbaで指定しています。

  セレクタ{linear-gradient( rgba(255, 0, 168, 0.54), rgba(3, 255, 250, 0.65)) ,url(画像のurl)}

   

背景色のアニメーション

セレクタ {
background: #0567F7;
animation: gradation 7s infinite alternate;
}
 
@keyframes gradation {
0% { background: #0567F7; }
25% { background: #7EF2FB; }
50% { background: #F874CB; }
75% { background: #FF7E5E; }
100% { background: #FFF169; }
}

グラデーションのアニメーション

セレクタ{
background: linear-gradient(45deg, #6cb8ff, #fff66c, #ffa36c);
background-size: 500% 500%;
animation: gradation02 10s ease infinite;
}
 
@keyframes gradation02 {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}

3色の斜めのグラデーションをbackground-sizeで大きいサイズにし、キーフレームのbackground-positionで位置をずらして表示させています。こちらは下記のサイトを参考に作ってみたものです。ありがとうございました。