Question

I have two columns that can stretch to variable heights, the designer wants to have a shadow between the two columns, but as you can see the image fades out at the top and the bottom. That means I can’t just use a background image using css that is left aligned in the column on the right.

So then I though maybe I can use a css 3 border shadow that has a radial gradient. I am probably going to use table cells to do this because I need the shadow to stretch to the height of the tallest column. How do I do this?

Answer 1

Previous answers doesn’t really answer your question: “How do I create a radial css3 border gradient shadow”

You can use a radial gradient to simulate a border shadow without images.

Demo: http://jsfiddle.net/sonic1980/wRuaZ/

background: -webkit-radial-gradient(50% 0%, 50% 5px, #aaa 0%, white 100%);
                                    |       |        |        |
                                    |       |        |        +--> color end     
                                    |       |        +--> color start
                                    |       +--> size of gradient ellipse (x-axis, y-axis)
                                    +---> position of ellipse center

It’s easy to modify to make it vertical or implement using :before or :after pseudo-classes.

Another example, an <hr> tag with shadow: http://jsfiddle.net/sonic1980/65Hfc/