SOURCE

<div class="gearWheel" />

body{
    background: peachpuff；
}
.gearWheel{
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -40px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-image:
        conic-gradient( 
            transparent 0deg, transparent 11.25deg, 
            #ccc 11.25deg,#ccc 33.75deg, 
            transparent 33.75deg, transparent 56.25deg,
            #ccc 56.25deg, #ccc 78.75deg,
            transparent 78.75deg, transparent 101.25deg,
            #ccc 101.25deg, #ccc 123.75deg,
            transparent 123.75deg, transparent 146.25deg,
            #ccc 146.25deg, #ccc 168.75deg,
            transparent 168.75deg, transparent 191.25deg,
            #ccc 191.25deg, #ccc 213.75deg,
            transparent 213.75deg, transparent 236.25deg,
            #ccc 236.25deg, #ccc 258.75deg,
            transparent 258.75deg, transparent 281.25deg,
            #ccc 281.25deg, #ccc 303.75deg,
            transparent 303.75deg, transparent 326.25deg,
            #ccc 326.25deg, #ccc 348.75deg,
            transparent 348.75deg, transparent -22.5deg
        ),
        
        radial-gradient(30px 31px at 40px 40px, #ccc 29px, #ccc 30px, transparent 30px, transparent 31px);
}