.color-box {
color: #fff;
padding: 50px 30px;
border-radius: 4px;
box-shadow: 0 7px 17px 0 rgba(0,0,0,.2), 0 6px 20px 0 transparent;
}
.blue-grad {
background: #007eff;
background: -webkit-linear-gradient(left top,#007eff,#00d8ff);
background: -o-linear-gradient(bottom right,#007eff,#00d8ff);
background: -moz-linear-gradient(bottom right,#007eff,#00d8ff);
background: linear-gradient(to bottom right,#007eff,#00d8ff);
}
.pink-grad {
background: #cd47ef;
background: -webkit-linear-gradient(left top,#cd47ef,#ef476f);
background: -o-linear-gradient(bottom right,#cd47ef,#ef476f);
background: -moz-linear-gradient(bottom right,#cd47ef,#ef476f);
background: linear-gradient(to bottom right,#cd47ef,#ef476f);
}
.green-grad {
background: #70ae6e;
background: -webkit-linear-gradient(left top,#70ae6e,#beee62);
background: -o-linear-gradient(bottom right,#70ae6e,#beee62);
background: -moz-linear-gradient(bottom right,#70ae6e,#beee62);
background: linear-gradient(to bottom right,#70ae6e,#beee62);
}
.purple-grad {
background: #8200fb;
background: -webkit-linear-gradient(left top,#8200fb,#c000ff);
background: -o-linear-gradient(bottom right,#8200fb,#c000ff);
background: -moz-linear-gradient(bottom right,#8200fb,#c000ff);
background: linear-gradient(to bottom right,#8200fb,#c000ff);
