I am using a sunburst behind a unicode character (eye, 👁), with a CSS of:
.the-eye{
width:100%;
border-radius:50%;
box-shadow: 0 0 20px 10px #eeee11;
}
HTML:
<span class="the-eye">👁</span>
However, instead of a clean yellow background behind it, I see a white circle which appears to be rendered as part of the eye graphic. Is there a way to make that white part of the unicode transparent?
Verified on Chrome and Firefox.
@Paulie_D is correct: set the background-color
to the same as the shadow.
.the-eye{
width:100%;
border-radius:50%;
font-size: 50pt;
box-shadow: 0 0 20px 10px #eeee11;
background-color: #eeee11;
}
<span class="the-eye">👁</span>