1. >
  2. >

CSSをコピペで実現できる背景に使えそうなグラデーションを集めた

 

CSS

CSSでグラデーション

グラデーションは画像を使うよりもCSSの方が軽く実装も編集も簡単なのでおすすめです。良さ気なグラデーションをいくつか集めてみました。CSSをコピペしてclass名を調整するだけで表示されます。

CSSの書き方

古いブラウザや一部スマホブラウザのためにwebkit用の対応は最低限しておいたほうがいいと思われます。色は複数指定することもできます。

CSS
background: -webkit-linear-gradient(グラデーションの向き, 色1, 色2);
background: linear-gradient(グラデーションの向き, 色1, 色2);

グラデーションサンプル

CSS
.box{
   background: linear-gradient(155deg, #fb83fa 0%, #31bcb8 100%);
}

参考:by simeydotme

CSS
.box{
   background: linear-gradient(to right bottom, #2f97c1, #d62246);
}

参考:by gomezisdan

CSS
.box{
   background: linear-gradient(to right top, #fc737a 10%, #ff7c9d 65%, #ffc01a 125%);
}

参考:by hoqqanen

CSS
.box{
   background: linear-gradient(130deg, darkturquoise, midnightblue) no-repeat fixed;
}

参考:by shakdaniel

CSS
.box{
   background:
      linear-gradient(
         limegreen,
         transparent
      ),
      linear-gradient(
         90deg,
         skyblue,
         transparent
      ),
      linear-gradient(
         -90deg,
         coral,
         transparent
      );
   background-blend-mode: screen; //一部ブラウザ非対応
}

参考:by akhbar

CSS
.box{
   background: linear-gradient(90deg, #1cd8d2 10%, #93edc7 90%);
}

参考:by balapa

CSS
.box{
   background: linear-gradient(to right top, #8e44ad 0%, #3498db 100%);
}

参考:by pirrera

CSS
.box{
   background: linear-gradient(to right, #25c481, #25b7c4);
}

参考:by nikhil8krishnan

CSS
.box{
   background: radial-gradient(ellipse farthest-corner at center top , #f39264 0%, #f2606f 100%);
}

参考:by supah

CSS
.box{
   background: linear-gradient(135deg, rgba(85,239,203,1) 0%,rgba(30,87,153,1) 0%,rgba(85,239,203,1) 0%,rgba(91,202,255,1) 100%);
}

参考:by thejamespower

CSS
.box{
   background:
      linear-gradient(45deg, hsla(352, 96%, 45%, 1) 0%, hsla(352, 96%, 45%, 0) 70%),
      linear-gradient(135deg, hsla(253, 95%, 42%, 1) 10%, hsla(253, 95%, 42%, 0) 80%),
      linear-gradient(225deg, hsla(179, 91%, 45%, 1) 10%, hsla(179, 91%, 45%, 0) 80%),
      linear-gradient(315deg, hsla(119, 96%, 49%, 1) 100%, hsla(119, 96%, 49%, 0) 70%);
}

参考:by suez

CSS
.box{
   background: linear-gradient(180deg,#4ac1ff,#795bb0);
}

参考:by andreasstorm

CSS
.box{
   background: linear-gradient(45deg, #085078 10%, #85d8ce 90%);
}

参考:by WebTukuru

CSS
.box{
   background: linear-gradient(160deg, rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6));
}

参考:by atakan

CSS
.box{
   background-image: linear-gradient(to top, #0099ff, #45d1ff);
}

参考:by bh

グラデーションは描画する範囲の広さで見た目が変わったりします。今回紹介したグラデーションの角度を変えたり、色を調整したりして使用してみてください。

クラウドソーシング「ランサーズ」
  • B!