Gradient BGs

by Keith Jeter

HTML

<div class="wid clr">
</div>

<div class="wid clr2">
</div>

<div class="wid clr3">
</div>

CSS

.wid { width: 100%; height: 50px; margin-bottom: 15px; }

.clr { 
background: #4e5c78;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjIlIiBzdG9wLWNvbG9yPSIjNGU1Yzc4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMiUiIHN0b3AtY29sb3I9IiM0ZTVjNzgiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(-45deg,  #4e5c78 2%, #4e5c78 2%, #000000 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(2%,#4e5c78), color-stop(2%,#4e5c78), color-stop(100%,#000000));
background: -webkit-linear-gradient(-45deg,  #4e5c78 2%,#4e5c78 2%,#000000 100%);
background: -o-linear-gradient(-45deg,  #4e5c78 2%,#4e5c78 2%,#000000 100%);
background: -ms-linear-gradient(-45deg,  #4e5c78 2%,#4e5c78 2%,#000000 100%);
background: linear-gradient(135deg,  #4e5c78 2%,#4e5c78 2%,#000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e5c78', endColorstr='#000000',GradientType=1 );
}

.clr2 { 

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fdffbc+0,fccb44+0,4e5c78+24,000000+100 */
background: #fdffbc; /* Old browsers */
background: -moz-linear-gradient(left, #fdffbc 0%, #fccb44 0%, #4e5c78 24%, #000000 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #fdffbc 0%,#fccb44 0%,#4e5c78 24%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #fdffbc 0%,#fccb44 0%,#4e5c78 24%,#000000 100%);...