背景グラデーション
linear-gradient:ほとんどのブラウザ(IE10以降)でベンダープレフィックス必要なし。
※但し「transparent」はsafariで上手く表示されない場合があるので「rgba(255, 255, 255, 0)」にしておくことで回避。
パターンA
.gradationA {
background-image: linear-gradient(180deg, #e0e7e9, #faf9f6, #e0e7e9);
}
パターンB
.gradationB {
background-image: linear-gradient(45deg, #cbecf5, #f5eac3, #fcdefb, #c8d6f5);
}
パターンC
.gradationC {
background-image: linear-gradient(45deg, #7db5df 0% 10%, #d8e6fa 10%, #fbfcfb, #d1f0f8 90%, #67bcd3 90% 100%);
}
パターンD
.gradationD {
linear-gradient(45deg, #757575 0%, #9E9E9E 45%, #E8E8E8 70%, #9E9E9E 85%, #757575 90% 100%);
}
パターンE
.gradationE {
background-image: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);
}
パターンF
.gradationF {
background-image: radial-gradient(circle at 10px 20px, #f4c14e 0% 20%, #c0563e 55% 100%);
}
