In my last post, I showed how to use CSS3 linear gradients to create your web sites background. This time I’ll show you how to do it with radial gradients. It’s simple for Firefox, but it’s a bit more complicated with Webkit browsers such as Safari and Chrome.
First, the Firefox way:
1 | html {height:100%; background:-moz-radial-gradient(center, #f4fafe, #a2d2ed) no-repeat #a2d2ed;} |
Simple, type of gradient, the start position, the start color, end color. Then I put in no-repeat and set the background color for longer pages. The Webkit syntax took a bit of figuring out but the same effect can be created:
1 | html {height:100%; background:-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(#f4fafe), to(#a2d2ed)) no-repeat #a2d2ed;} |
Whoa, a lot more is going on here, but once you know what’s happening it’s not that complicated. First we set the gradient type, then the start position where I’ve set it to 50% of the width and 50% of the height of the page. Next the start radius, which I’ve set to 0. Then the end point, which is also 50% 50%. This causes the gradient to travel towards every side of the page. Next, the end radius, which you set to how big you want your gradient to be. And finally, your start and end colors.
Pretty simple once you know what to do, but I think I’m partial to the Firefox syntax and, hopefully soon, there will be a standard way to write this and it will work in Internet Explorer.
hey thanks for the tip, this worked!
hello there.. i’ve tried for webkit. this is worked. but how about moz? -o- with -ms? please explain.