I was inspired by Katrina’s post last month about Pretty Gradients, and I created some really pretty premade Blogger templates for my shop.
I was only able to maneuver the gradients from side-to-side, rather than at a diagonal or up-and-down, because most of the browsers would cut off the gradient after so many pixels and start over – that looked really choppy, but luckily the horizontal or side-to-side gradient didn’t have that pesky problem.
All 3 templates have a subtle gradient, nothing too dramatic, as well as some pretty cool features. And if gradient isn’t your thing I offer to remove the gradient at no additional charge and replace with white or another color of your choosing.
If you’re nerdy and want to know the CSS I used here it is:
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(left, #ffffff 0%, #EFD9E9 100%);
/* Mozilla Firefox*/
background-image: -moz-linear-gradient(left, #ffffff 0%, #EFD9E9 100%);
/* Opera: */
background-image: -o-linear-gradient(left, #ffffff 0%, #EFD9E9 100%);
/*Â Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #ffffff ), color-stop(1, #EFD9E9));
/*Â Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(left, #ffffff 0%, #EFD9E9 100%);
/*Â W3C Markup, IE10 Release PreviewÂ */
background-image: linear-gradient(to right, #ffffff 0%, #EFD9E9 100%);
I know, nerdy, but so cool!