Search code examples
csseffectsglow

Hourglass-shaped glowing CSS

I have an image from a designer, that looks like this:

enter image description here

I'd like to make it 1px height vertically-repeated (as background for scroll-bars grip). Is there a way to emulate the glowing effect in the middle of the image, using CSS3?

Regards,

Solution

  • Create another div on top of it, with the following background:

    background-image: linear-gradient(bottom, rgba(255,255,255, 0) 33%, rgba(255,255,255, 0.5) 67%, rgba(255,255,255,0) 100%);

    Of course, to be of any use, this should be rewritten like this:

        background-image: linear-gradient(bottom, rgba(255,255,255, 0) 33%, rgba(255,255,255, 0.5) 67%, rgba(255,255,255,0) 100%);
    background-image: -o-linear-gradient(bottom, rgba(255,255,255, 0) 33%, rgba(255,255,255, 0.5) 67%, rgba(255,255,255,0) 100%);
    background-image: -moz-linear-gradient(bottom, rgba(255,255,255, 0) 33%, rgba(255,255,255, 0.5) 67%, rgba(255,255,255,0) 100%);
    background-image: -webkit-linear-gradient(bottom, rgba(255,255,255, 0) 33%, rgba(255,255,255, 0.5) 67%, rgba(255,255,255,0) 100%);
    background-image: -ms-linear-gradient(bottom, rgba(255,255,255, 0) 33%, rgba(255,255,255, 0.5) 67%, rgba(255,255,255,0) 100%);