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

css

2019-08-20

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

グラデーションの種類

  • 基本

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

-css

関連記事

カテゴリーごとにリンクの色を変えたい!属性セレクタを使ってCSSを設定しよう

classを付与しなくても属性値によってcssでスタイルをつけられる!お知らせのカテゴリーの色分けに便利! href属性、class属性、target属性、alt属性、src属性、type属性…これら …

スクロールがひっかかる?反発して動かない、ページが読めない場合に対応したこと

スクロールできない! スマホでスクロールしようとして気が付きました。(PCでは分かりづらかった) スクロールしようとしても画面が動かない、下にもコンテンツがあるのに閲覧できないことがあったんです。 リ …

cssのanimationを使ったGIFアニメのようなSVGのパラパラ漫画を作りたい!

CSSで作るレスポンシブ対応のスプライトアニメーション やりたいこと ・JavaScriptは使わず、cssのanimationを使った簡単なアニメーション ・レスポンシブ対応 ・拡大しても画質が変わ …

CSS Transitionで手軽にアニメーションを取り入れたい

CSSのアニメーション、Transitionに変化を追加してオンマウスで滑らかに変化させたり、押す感を出せたり。これだけでちょっとインタラクティブなサイトになりますね!

「ダークモード」対応の注意点と手順を知りたい!

Webサイトの「ダークモード」対応にチャレンジ! 「ダークモード」とは? パソコンやスマホ等のブラウザ画面に「ライトモード」と「ダークモード」があります。 明るい背景に暗色系の文字が「ライトモード」、 …