CSS bubbles

gistfile1.txt

Can make a bubble with a CSS3 opacity gradient placed over any background.

<div class='abubble'>
    <div class='innerbubble'></div>
</div>

and change the location of the bubble and it's size by changing the properties in the .bubble class selector.

.abubble {
    position: absolute;
    top: 300px;
    left: 300px;
    background-color: transparent;
    width: 15px;
    height: 15px;
    z-index: 2;
}
.innerbubble {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    z-index: 2;
   
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background: transparent;
    background: -webkit-radial-gradient(center, circle cover, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 255) 100%);
    background: -moz-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 255) 100%); 
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(50%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 255))); 
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 255) 100%); 
    background: -o-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 255) 100%); 
    background: -ms-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 255) 100%); 
    background: radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 255) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ff140006',GradientType=1 );
}