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

2019-08-20

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で位置をずらして表示させています。こちらは下記のサイトを参考に作ってみたものです。ありがとうございました。

広告スポンサーリンク