Popular Gradient Backgrounds
Here are the codes to some popular gradient backgrounds
Post the codes underneath the image you want into your body div Div looks like this Body{ some coding here: coding; and more coding: coding; }
Note: DELETE YOUR CURRENT BACKGROUND: _______ CODE IN YOUR BODY TAG TO GET IT TO WORK
Pastel gradient code
background: -moz-linear-gradient(top, #f7aaf7 1%, #8decef 99%, #a6eded 100%, #a2f2f2 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#f7aaf7), color-stop(99%,#8decef), color-stop(100%,#a6eded), color-stop(100%,#a2f2f2)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f7aaf7 1%,#8decef 99%,#a6eded 100%,#a2f2f2 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f7aaf7 1%,#8decef 99%,#a6eded 100%,#a2f2f2 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #f7aaf7 1%,#8decef 99%,#a6eded 100%,#a2f2f2 100%); /* IE10+ */ background: linear-gradient(to bottom, #f7aaf7 1%,#8decef 99%,#a6eded 100%,#a2f2f2 100%); /* W3C */ filter: progid:DXImageTransform.M
Beach Gradient Code
background: #fefcea; /* Old browsers */ background: -moz-linear-gradient(-45deg, #fefcea 0%, #f1da36 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#fefcea), color-stop(100%,#f1da36)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, #fefcea 0%,#f1da36 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, #fefcea 0%,#f1da36 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, #fefcea 0%,#f1da36 100%); /* IE10+ */ background: linear-gradient(135deg, #fefcea 0%,#f1da36 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
Blue Gradient Code
background: #e0f3fa; /* Old browsers */ background: -moz-linear-gradient(-45deg, #e0f3fa 0%, #d8f0fc 50%, #76c4fc 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#e0f3fa), color-stop(50%,#d8f0fc), color-stop(100%,#76c4fc)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, #e0f3fa 0%,#d8f0fc 50%,#76c4fc 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, #e0f3fa 0%,#d8f0fc 50%,#76c4fc 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, #e0f3fa 0%,#d8f0fc 50%,#76c4fc 100%); /* IE10+ */ background: linear-gradient(135deg, #e0f3fa 0%,#d8f0fc 50%,#76c4fc 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0f3fa', endColorstr='#76c4fc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
Pink Gradient Code
background: #fcecfc; /* Old browsers */ background: -moz-linear-gradient(top, #fcecfc 0%, #fba6e1 50%, #ff7cd8 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcecfc), color-stop(50%,#fba6e1), color-stop(100%,#ff7cd8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #fcecfc 0%,#fba6e1 50%,#ff7cd8 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #fcecfc 0%,#fba6e1 50%,#ff7cd8 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #fcecfc 0%,#fba6e1 50%,#ff7cd8 100%); /* IE10+ */ background: linear-gradient(to bottom, #fcecfc 0%,#fba6e1 50%,#ff7cd8 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcecfc', endColorstr='#ff7cd8',GradientType=0 ); /* IE6-9 */
