bg gradient

by Roberto Apasajja

HTML

<div id="d1">d1</div>
<div id="d2">d2</div>
<div id="d3">d3</div>
<div id="d4">d4</div>
<div id="d5">d5</div>
<div id="d6">d6</div>
<div id="d7">d7</div>
<div id="d8">d8</div>
<div id="d9">d9</div>
<div id="d10">d10</div>
<div id="d11">d11</div>
<div id="d12">d12</div>
<div id="d13">d13 - multiple gradient</div>
<div id="d14">d14</div>
<div id="d15">d15</div>
<div id="d16">d16</div>
<div id="d17">d17</div>
<div id="d18">d18</div>
<div id="d19">d19</div>
<div id="d20">d20</div>
<div id="d21">d21</div>
<div id="d22">d22</div>
<div id="d23">d23</div>
<div id="d24">d24</div>
<div id="d25">d25</div>
<div id="d26">d26</div>
<div id="d27">d27</div>
<div id="d28">d28</div>
<hr><br>

CSS

hr {
  clear:both;
}
html{
  background:white
}

div{
	width: 200px;
	height: 150px;
  float: left;
  border: 2px solid #ccc;
}

#d1 {
    background: linear-gradient(45deg,rgba(255,155,0,1.00) 0%,rgba(222,0,202,1.00) 100%)
}

#d2 {
    background: linear-gradient(45deg,#03A9F4 0%,rgba(222,0,202,1.00) 100%)
}

#d3 {
    background: linear-gradient(to right, #86686f 0%, #775a6a 50%, #6f5779 75%, #685d9d 100%)
}

#d4 {
    background: linear-gradient(135deg,rgba(0,173,239,1.00) 0%,rgba(24,175,78,1.00) 100%)
}
#d5 {
    background: linear-gradient(45deg,rgba(240,63,0,1.00) 0%,rgba(254,228,0,1.00) 100%)
}
#d6 {
    background: linear-gradient(45deg,rgba(0,244,255,1.00) 0%,rgba(17,55,173,1.00) 100%)
}
#d7 {
    background: linear-gradient(45deg,rgba(255,0,71,1.00) 0%,rgba(44,52,199,1.00) 100%)
}
#d8 {
    background: linear-gradient(to right,#085078,#4694a3,#84d7cd);
}
#d9 {
    background: linear-gradient(45deg,rgba(252,54,253,1.00) 0%,rgba(93,63,218,1.00) 100%);
}
#d10 {
    background: linear-gradient(7deg, #ffd521, #f50000 40%, #b900b4);
}
#d11 {
    background: linear-gradient(60deg, #ffd521, #f50000 50%, #b900b4);
}
#d12 {
    background: linear-gradient(90deg, #572c9f 0%, #af5ca5 100%);
}
#d13 {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)), linear-gradient(180deg, rgba(255, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

#d14 {
    background: -webkit-radial-gradient(center, ellipse cover, #2980b9 0%, #121890 100%);
}

#d15 {
    background: linear-gradient(41deg, #ffb87d 0%, #ff3d99 100%);
}

#d16 {
        background: linear-gradient(to left, #037FD5, #03c5d5);
}

#d17 {
        background: linear-gradient(to left, #D1335B, #ff635d);
}

#d18 {
        background: linear-gradient(to left, #3f4b62, #935f86);
}

#d19 {
        background: linear-gradient(to left, #dc3545, #FF9947);
}

#d20 {
        background: linear-gradient(28deg, #ff56f0 0%, #ffbe28 100%);
}

#d21 {
        background: linear-gradient(167deg, #00fff6 0%, #5824f4...