In CSS, what is the difference between transparent and inherited color, practically?

Question

transparent -- Specifies that the color should be transparent. This is default
inherit -- Inherits this property from its parent element.

But practically speaking, I don't see any difference in them. In the following example, both child elements will have coral background color.

<div style="background-color: coral">
  <div style="background-color: transparent">
    transparent
  </div>
  <div style="background-color: inherit">
    inherit
  </div>
</div>

In which conditions would I get a different result?

If the parent is coral, and you inherit, it will be coral. Also, if it's transparent, it will be transparent on it's parent, so it will be coral aswell — arlan schouwstra, Jul 14 '23 at 07:26

score 5 · Answer 1 · answered Jul 14 '23 at 08:40

You can clearly see a difference when the color has transparency (related: Color of stacked semi-transparent boxes depends on order?)

div {
  padding: 20px;
}

<div style="background-color: rgb(255 127 80 / 50%)">
  <div style="background-color: transparent">
    transparent
  </div>
  <div style="background-color: inherit">
    inherit
  </div>
</div>

score 3 · Accepted Answer · answered Jul 14 '23 at 07:29

3

See this example:

div {
  border: 1px solid black;
  padding: 1em;
  margin-right: 50%;
  margin-bottom: 1em;
}

div div {
  margin-right: -100%;
}

<div style="background-color: coral">
  <div style="background-color: transparent">
    transparent
  </div>
  <div style="background-color: inherit">
    inherit
  </div>
</div>

Transparent elements have no background color and you see through them, inheriting elements have a background color (that of their parent). This does make a difference in some situations, like here.

answered Jul 14 '23 at 07:29

deceze

510,633
85
743
889

A good answer to a silly question – vals Jul 14 '23 at 08:16
I'm a bit surprised the question comes from someone with 25k unicorn points, but I can understand that the difference isn't obvious in most situations, if you have no expectation of being able to arrange elements in fancy ways as shown above. – deceze Jul 14 '23 at 08:18
@vals actually, no one talked about the important case where the color itself is transparent and where the difference is clear – Temani Afif Jul 14 '23 at 08:43
@TemaniAfif You are right, good catch – vals Jul 14 '23 at 09:24
@vals I'm glad it was a silly question to you. Not to me. – viam0Zah Jul 17 '23 at 10:11
@deceze thanks for the example. makes it quite clear. – viam0Zah Jul 17 '23 at 10:15

Md. Rakibul Islam · Answer 3 · 2023-07-14T07:48:17.570

The difference.

When you set transparent then anything behind can be seen not just the parent background. That's the main difference.

<div style="background-color: coral">
  <div style="background-color: transparent; position: relative; z-index: 2">
    transparent
  </div>
  <div style="background-color: inherit; position: relative; z-index: 2">
    inherit
  </div>
  <div style="background: red; height: 100px; float: right; margin-top: -35px; position: relative; z-index: 1">
    difference
  </div>
</div>

In CSS, what is the difference between transparent and inherited color, practically?

3 Answers3