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で縦書き

縦書き 文章を縦書きにして右から左へ流す。 縦書きの基本 文章を縦書きにして右から左へ流す。 親{text-align:right; display: inline-block;} 子{writing …

メインビジュアルをブラウザ画面ぴったりになるように調整したい!

パソコン、スマホ、タブレットでも メインビジュアルが画面いっぱいになるように設定 パソコンだと存在感あるファーストビューでも、スマホだと横幅に合わせて小さくなってしまうことがありますよね。 画像の左右 …

スマホ対応の見やすい表を作りたい! tableのCSS設定

よく使うtableのCSSデザイン サイト制作の会社概要や比較表、料金表などでよく使うtable。css設定についてまとめました。例にあげたのは、全部tdの場合です。thが入ると変わってくるものもあり …

CSSで影をつける

CSSでドロップシャドウをつける方法を二つ紹介します。

横並びのデザインをもっと自由に!フレックスボックスレイアウト

子要素のレイアウトを指定する ナビゲーションメニューやページネーション、並列のレイアウト等に欠かせないフレックスボックスレイアウトについてまとめてみました! 横の配置をデザインする「justify-c …