Pie charts with -webkit-gradient

HTML

<span class="pie-chart p10"></span>
<span class="pie-chart p25"></span>
<span class="pie-chart p33"></span>
<span class="pie-chart p50"></span>

CSS

.pie-chart {
    display:inline-block;
    width:60px;
    height:60px;
    margin-right:20px;
    background:orange;
    
    -webkit-border-radius:50%;
    border-radius:50%;
    -webkit-box-shadow:1px 1px 5px rgba(0,0,0,0.4);
    box-shadow:1px 1px 5px rgba(0,0,0,0.4);
}

.pie-chart.p10 {
    background-image: -webkit-gradient(radial, 30 30, 0, -100 0, 30,
            from(orangered), to(orangered));
}

.pie-chart.p25 {
    background-image: -webkit-gradient(radial, 30 30, 0, 0 0, 30,
            from(orangered), to(orangered));
}

.pie-chart.p33 {
    background-image: -webkit-gradient(radial, 30 30, 0, 10 0, 30,
            from(orangered), to(orangered));
}

.pie-chart.p50 {
    background-image: -webkit-gradient(radial, 30 30, 0, 30 0, 30,
            from(orangered), to(orangered));
}