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