Possible to do a full screen transparent gradient effect via CSS?

Question

Hi, so I'm wondering if this is possible. I've got this concept where I have a small tilable texture used as a background. Is it set to repeat at both x and y.

In my Photoshop design I've just added a shadow layer on top which goes from 100% transparent and down to about 40% transparent in a grayish color. Which together with the background image gives the illution of shadow. Now, I tried to save the shadow layer as a PNG, but it seems I need to save it as PNG-24 which makes the png file HUGE.

So, is this possible at all? I mean, using xml or xaml, this would be a breeze. I'd just insert a rectangle and add a gradient with 0% on the top and 40% at the bottom, with the color black or something. Giving me a nice fading effect. But this is not possible in HTML and CSS?

Answer 1

Normally if understand your explanation correctly, you can apply the same concept of repeating the dropshadow as you do on your normal background.

Just slice your dropshadow to at a width of 1px and the full height of the gradient itself. Then repeat the png image with your dropshadown on the X axis (css: background-repeat: repeat-x;)

Hope this helps. Jasper

Answer 2

It's a bit difficult to advise without an example. You say in one of the comments, "I originally wanted the shadow to vary a bit towards the middle" - does this mean you currently have an image that's 1500-odd pixels wide?

It's generally better to repeat images wherever possible, so you could have one that is 1px wide and repeats all the way across (this also is better for really wide screens) and then a separate image in another 'layer' that has the background position set to the middle.

If your gradient is no taller than 256px you can also reduce the number of colours. You might also like to try PNGcrush, which is a good tool for reducing the size of PNG files.

Answer 3

Hi there,

I am not sure if I understood well, but just in case I dont know if you hear of the powerful filter from microsoft which you can create beautiful gradients among other things.

If you paste this code on your css where you want to create your gradient you would see the results.

filter:progid:DXImageTransform.Microsoft.Gradient (GradientType=1, StartColorStr='#000000', EndColorStr='#0000FF')

if you want a full screen, apply this to the body tags, if you want this for a div apply it to the div, I don't remember if you have to set a fixed height or it would adjust to the height automatic.

However as it is from microsoft it only works for IE :-(.

I hope this helps.

Cesar.