40

Should you use rgba(0, 0, 0, 0) or rgba(255, 255, 255, 0) for transparency in CSS?

What are the pros and cons of each?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Joe
  • 16,328
  • 12
  • 61
  • 75
  • one is white and one is black if you were to modify the opacity any. Otherwise it's still transparent. What is the scenario you have where this even came up as a question? – Kai Qing Apr 11 '13 at 20:49
  • 4
    "@JackManey "Why would it matter?" I don't know. That's why I asked. – Joe Apr 17 '13 at 17:40

4 Answers4

72

The last parameter to the rgba() function is the "alpha" or "opacity" parameter. If you set it to 0 it will mean "completely transparent", and the first three parameters (the red, green, and blue channels) won't matter because you won't be able to see the color anyway.

With that in mind, I would choose rgba(0, 0, 0, 0) because:

  1. it's less typing,
  2. it keeps a few extra bytes out of your CSS file, and
  3. you will see an obvious problem if the alpha value changes to something undesirable.

You could avoid the rgba model altogether and use the transparent keyword instead, which according to w3.org, is equivalent to "transparent black" and should compute to rgba(0, 0, 0, 0). For example:

h1 {
    background-color: transparent;
}

This saves you yet another couple bytes while your intentions of using transparency are obvious (in case one is unfamiliar with RGBA).

As of CSS3, you can use the transparent keyword for any CSS property that accepts a color.

Cᴏʀʏ
  • 105,112
  • 20
  • 162
  • 194
9

There are two ways of storing a color with alpha. The first is exactly as you see it, with each component as-is. The second is to use pre-multiplied alpha, where the color values are multiplied by the alpha after converting it to the range 0.0-1.0; this is done to make compositing easier. Ordinarily you shouldn't notice or care which way is implemented by any particular engine, but there are corner cases where you might, for example if you tried to increase the opacity of the color. If you use rgba(0, 0, 0, 0) you are less likely to to see a difference between the two approaches.

Mark Ransom
  • 299,747
  • 42
  • 398
  • 622
  • 4
    This is the correct answer. Specifically, the part that says "there are corner cases where you might, for example if you tried to increase the opacity of the color" is especially true when working with gradients, as the Image Values module [requires](http://www.w3.org/TR/css3-images/#color-stop-syntax) that gradient colors are calculated in a pre-multiplied RGBA space. Note however that implementations still vary across browsers - in particular, some recent versions still violate that requirement in the spec (although to be fair, I believe it wasn't specified until a recent revision). – BoltClock Apr 17 '13 at 08:55
3

There a small difference when u use rgba(255,255,255,a),background color becomes more and more lighter as the value of 'a' increase from 0.0 to 1.0. Where as when use rgba(0,0,0,a), the background color becomes more and more darker as the value of 'a' increases from 0.0 to 1.0. Having said that, its clear that both (255,255,255,0) and (0,0,0,0) make background transparent. (255,255,255,1) would make the background completely white where as (0,0,0,1) would make background completely black.

Rahul Goyal
  • 644
  • 1
  • 8
  • 19
  • 3
    This does not really answer the question and in any case does not contain information that is not already provided by at least one of the other answers to this question. – Xaver Kapeller May 15 '14 at 16:20
  • 1
    How can u say that it does not answer the question ! I tried to explain the concept behind rgba() so that the pros and cons can be understood. – Rahul Goyal May 16 '14 at 05:12
  • 2
    You explained what `rgba(...)` does, but that is not what the OP was asking. Just look at the other answers to this question, they are quite different from yours. – Xaver Kapeller May 16 '14 at 12:21
  • I actually found this helpful. I have a related question, though not exact;y the same, and would be inefficient to post a new question. I agree explanation of the concept is more important than a simple Pro/Con list with no understanding. – ximiki Feb 01 '17 at 21:36
2

I would recommend using rgba(255,255,255,0) because broken (newest) safari thinks that if you are using transparent or rgba(0,0,0,0) in linear-gradent you really mean gray, For more info please head to - What happens in Safari with the transparent color?

Marcin Zaborowski
  • 197
  • 1
  • 6