Apr 29, 2010 0

Firefox vs WebKit CSS3 radial gradients

I am writing this to hopefully save you a ton of time. Let me start by stating that radial gradients are two different beasts in Firefox and Webkit. I intend to touch upon my experience working with radial gradients; however, I am not going to explain every detail about them. Let’s start with the catalyst for this whole exercise in the first place.

I wanted to create a creased paper effect using CSS3 radial gradients. Here is a photograph of what this effect looks like on paper:

Below you’ll find the screenshots and CSS3 codes used to create the effect in Firefox and Webkit:


background: -moz-radial-gradient(50% 1200px 1deg, circle closest-corner, rgba(51, 51, 51, .9) 50%, rgba(242, 242, 242, .5) 95%);
background: -moz-radial-gradient(50% 145% 1deg, circle closest-corner, rgba(51, 51, 51, .9) 50%, rgba(242, 242, 242, .9) 95%);

In Firefox, I had to use two styles because I ran into a problem with getting the radial gradient to appear in the right place at the bottom of its block level element (BLE). I used the first style with a fixed position (px) on BLEs that had a short height. This allowed me to force the gradient way below the bottom of the BLE to create a more subtle effect. However, on BLEs with a tall height, the gradient showed up in the middle of the BLE. To correct this, I had to use relative positioning (%) to make it appear in the right place.

Overall, I love how Firefox allows you to create an ellipse (oval) that stretches the radial gradient to the left and the right. The only crappy part is that there isn’t one style that can scale correctly to fit any BLE’s height.


background: -webkit-gradient(radial, 480 bottom, 5, 480 bottom, 250, from(rgba(51, 51, 51, .2)), to(rgba(242, 242, 242, .1)));

Webkit, on the other hand, cannot create an ellipse. No matter what you try, you will always get a perfect circle. URGH! But you can set a y-axis position that works for any BLE’s height.

I don’t think that either Firefox or Webkit planned for radial gradients to be used this way. As a result, neither are perfect for this, but where’s the fun in not pushing boundaries?