The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Creating a dropshadow over a gradient background

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #27094

    I’m working on a new site and am having a slight problem with my drop shadow on my content area that is over a gradient background.

    I’ve done drop shadows before but my backgrounds were always a solid color so I would just select that color and the shadow when cropping from photoshop.

    If you look at this site I think it will be more clear the problem I’m running into.

    The header and footer are looking good but the middle is a little scary.

    Is there a better way to do this? I was saving the image as a png. I also tried gif.



    Yea… you have a couple choices.

    This is your current repeating background image:

    wtf? Why does this image not have a consistent fade? If you make this image consistent, repeating it will not be so strange looking

    Another option is to make one large background image that covers the entire fade as it should be.

    Chris Coyier

    This would be a perfect example where using CSS3 box shadows would make quick work of it!

    Just use them on your main content area like:

    -moz-box-shadow: 0 0 10px black;
    -webkit-box-shadow: 0 0 10px black;

    You could do your rounded corners in a similar manner as well.


    Thanks Chris!
    I’m going to mess around with this now. I’m still not the best at coding yet but this seems pretty easy.

    What about in the dreaded Internet Explorer? Any idea how this works or if at all??


    "WildSpirit" wrote:
    What about in the dreaded Internet Explorer? Any idea how this works or if at all??

    yea… chances are you still get 30-40% of your visitors from IE6 and IE7, which don’t do CSS3. I don’t even know if IE8 does shadows. (anyone?) That’s why I have been sticking with CSS2.1.


    That was my fear cause that would have fixed my problem easily.

    So How do I fix this problem. I don’t quite understand the first response I got. Some pages are also really short, like the contact page, so I’m running into another problem with the bottom rounded corner image. You’ll see what I mean if you take a look at it.

    I don’t know why this is being so challenging!


    Yea… that didn’t really make any sense re-reading it…

    Look at your current repeating bg image

    Repeating images should be practically the same at the top and bottom of the image, so that when you repeat it over and over, it looks like one long shaddow.

    This isn’t the best example, since it’s horizontal instead of vertical, but look at this image:

    You’ll see that the entire image is exactly the same on the left and right side… so it repeats horizontally on my home page to make a "fadding bar"… w/e

    Does that help?


    Thanks Ashton,
    Sorry it’s taken so long to post back… been swamped! Anyways, I created my own drop shadow by creating a black box with a gaussian blur instead of using drop shadow from the blending options in photoshop and that seemed to do the trick!

    Thanks for your patience and time for explaining!

    Until next time!

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.