rgba doesn't work for fill property in CSS

Question

circle {
    fill: rgba(248, 248, 248, 0.5);
}

<svg width='400' height='400'>
    <circle r='100' cx='200' cy='200'></circle>
</svg>

rgb code works for this, but I found rgba doesn't work. The shapes become invisible. I tested this on Chrome and Firefox.

Am I missing something else here?

it works for me but your circle is so pale against a white background, it's basically invisible. — Robert Longson, Mar 18 '21 at 07:28
In your case the color is a very light grey - almost white. This is why it _seam_ it doesn't to work. If you change the color to something else like `fill: rgba(248, 0, 0, 0.5);` you'll see it works — enxaneta, Mar 18 '21 at 07:30

score 2 · Accepted Answer · answered Mar 18 '21 at 07:34

2

The circle is almost white and also partially transparent, you just can't see it against a white background.

On a black background you can see it's rendered perfectly OK by both Firefox and Chrome...

svg {
    background-color: black;
}

circle {
    fill: rgba(248, 248, 248, 0.5);
}

<svg width='400' height='400'>
    <circle r='100' cx='200' cy='200'></circle>
</svg>

answered Mar 18 '21 at 07:34

Robert Longson

Thanks so much! dang! I was so stupid ! lol thanks! – artemismars Mar 18 '21 at 07:49

1 Answers1