Glossy Icon #01

by panique

HTML

Glossy icon, always with a 57x57px icon.

<div id="glossy-icon"></div>

CSS

#glossy-icon {
    width: 57px;
    height: 57px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    background-image: -webkit-gradient(radial, 28.5 -47, 0, 28.5 0, 700,
        from(rgba(255,255,255,1)), to(rgba(255,255,255,0)),
        color-stop(10%, rgba(255,255,255,0.2)),
        color-stop(10.5%, rgba(140,140,140,0.2)),
        color-stop(13%, rgba(140,140,140,0)),
        color-stop(13.7%, rgba(255,255,255,0)),
        color-stop(17%, rgba(255,255,255,1))), url(http://www.xorph.com/images/ba-icon.png);
    background-image: -moz-radial-gradient(28.5px -47px 45deg, circle farthest-side,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,0.2) 72%,
        rgba(140,140,140,0.3) 74.5%,
        rgba(140,140,140,0) 85%,
        rgba(255,255,255,0) 95%,
        rgba(255,255,255,1) 160%), url(http://www.xorph.com/images/ba-icon.png);
}