Sunday, September 19, 2010

Linear Gradient using three colors

The CSS2 that produced this background linear gradient uses a base color with two color stops. First the color is set to aquamarine, then 40% down the page it is faded to white and 60% down the white fades into pink for the rest of the page. The idea to make this work is not to overlap any of the color regions. If you do the color edges are hard and ugly having none of the gradient merge.

Now, I'd like to do something like this but with radial graidents to make a pastel spot in one region of the screen and a different colored spot in another region that both fade to a common color, usually white. I was not able to achieve this today. There are some teases out there that it is possible to combine several radial gradient fills to make one background, but it seems that the webkit software only centers the radial gradient at the center and doesn't really allow you to move it around, except that there may be some other property of backgrounds that allows one to do that.

I was able to get two different radial gradients to appear on a page,an aquamarine smudge and a pink smudge but I couldn't figure out how to position them around the page. The arguments to the webkit command seem to be about the radial gradient and not how to place it. A tease I saw on a web site, an image suggesting that it was created with radial graidents that were made to overlap, did not show how it was done. Prehaps it was a demo created from a vector graphics program and CSS3 doesn't really do this, or as I say, maybe I just haven't discovered what property of backgrounds actualy moves them around on the page.

Free Web Hosting