background gradients

list of all background gradients used on the site

by Sarah Giles

HTML

<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/3.0.1/js/bootstrap.min.js"></script>
<body class="container-fluid">
<div class="row">

<div class="col-xs-6">
<div class='box1'><p>1</p></div>
<div class='box2'><p>2</p></div>
<div class='box3'><p>3</p></div>
<div class='box4'><p>4</p></div>
<div class='box5'><p>5</p></div>
<div class='box6'><p>6</p></div>
<div class='box7'><p>7</p></div>
<div class='box8'><p>8</p></div>
<div class='box9'><p>9</p></div>
<div class='box10'><p>10</p></div>
<div class='box11'><p>11</p></div>
<div class='box12'><p>12</p></div>
<div class='box13'><p>13</p></div>
<div class='box14'><p>14</p></div>
<div class='box15'><p>15</p></div>
<div class='box16'><p>16</p></div>
<div class='box17'><p>17</p></div>
<div class='box18'><p>18</p></div>
<div class='box19'><p>19</p></div>
<div class='box20'><p>20</p></div>
<div class='box21'><p>21</p></div>
<div class='box22'><p>22</p></div>
<div class='box23'><p>23</p></div>
<div class='box24'><p>24</p></div>
<div class='box25'><p>25</p></div>
<div class='box26'><p>26</p></div>
<div class='box27'><p>27</p></div>
<div class='box28'><p>28</p></div>
<div class='box29'><p>29</p></div>
<div class='box30'><p>30</p></div>
<div class='box31'><p>31</p></div>
<div class='box32'><p>32</p></div>
<div class='box33'><p>33</p></div>
<div class='box34'><p>34</p></div>
<div class='box35'><p>35</p></div>
<div class='box36'><p>36</p></div>
<div class='box37'><p>37</p></div>
<div class='box38'><p>38</p></div>
<div class='box39'><p>39</p></div>
<div class='box40'><p>40</p></div>
<div class='box41'><p>41</p></div>
<div class='box42'><p>42</p></div>
<div class='box43'><p>43</p></div>
<div class='box44'><p>44</p></div>
<div class='box45'><p>45</p></div>
<div class='box46'><p>46</p></div>
</div>
<div class="col-xs-6">
<div class='box47'><p>1</p></div>
<div class='box48'><p>2</p></div>
<div class='box49'><p>3</p></div>
<div class='box50'><p>4</p></div>
<div class='box51'><p>5</p></div>
<div...

SCSS

.col-xs-6{
  float:left;
  width:50%;
}
.col-xs-6 div{
  width:100%;
  height:150px;
  font-size:30px;
  color:#06ff54;
  font-weight:bold;
}

.box1{background:linear-gradient(to top,#d9d9d9 0,#fff 100%);}
.box2{background:linear-gradient(to top,#434343,#606060);}
.box3{background:linear-gradient(to right,#ffadd8 39%,#ffabd7 40%,#fe2a97 100%);}
.box4{background:linear-gradient(to right,#feffe8 0,#feff00 100%);}
.box5{background:linear-gradient(to right,#fce6f3 0,#e9008a 100%);}
.box6{background:linear-gradient(to right,#fcddef 0,#e9008a 100%);}
.box7{background:linear-gradient(to right,#fcddef 0,#e9008a 0,#feffd7 0,#feff00 100%);}
.box8{background:linear-gradient(to right,#fcddef 0,#e9008a 0,#e0e0e0 0,#000 100%);}
.box9{background:linear-gradient(to right,#f7f2ab 48%,#f7f2ab 51%,#fed28a 100%);}
.box10{background:linear-gradient(to right,#e8e8e8 0,#000 100%);}
.box11{background:linear-gradient(to right,#e0f3f8 0,#009ec7 100%);}
.box12{background:linear-gradient(to right,#e0e0e0 0,#b8b8b8 100%);}
.box13{background:linear-gradient(to right,#b3dced 9%,#b3dced 33%,#98d5eb 46%,#29b8e5 99%,#bce0ee 100%);}
.box14{background:linear-gradient(to right,#666,#000);}
.box15{background:linear-gradient(to bottom,#fefefe 7%,#ececec 45%);}
.box16{background:linear-gradient(to bottom,#FDFD41 50%,#F8F136 50%);}
.box17{background:linear-gradient(to bottom,#FDC75B 50%,#c6a006 50%);}
.box18{background:linear-gradient(to bottom,#fcfcfc 26%,#ebebeb 56%);}
.box19{background:linear-gradient(to bottom,#fbef42 50%,#Fd0 50%);}
.box20{background:linear-gradient(to bottom,#F7545A 50%,#E3484E 50%);}
.box21{background:linear-gradient(to bottom,#ebebeb 26%,#fcfcfc 56%);}
.box22{background:linear-gradient(to bottom,#e9e9e9 0,#e1e1e1 50%,#cecece 60%,#c8c8c8 70%,#bdbdbd 100%);}
.box23{background:linear-gradient(to bottom,#e5e5e5 9%,#b7b7b7 100%);}
.box24{background:linear-gradient(to bottom,#e4e4e4 0,#b8b8b8 100%);}
.box25{background:linear-gradient(to bottom,#D25F8C 50%,#B24B74...