Skip to main content

CSS Colors Keywords

CSS provides three additional color keywords that are useful in certain situations: transparent, currentcolor, and inherit.

The transparent​

The transparent keyword defines a fully transparent color. It can be used to make an element's background, border, or text completely transparent.

As an example:

p {
     background-color: transparent;
     border: 2px solid transparent;
     color: transparent;
}

The currentcolor​

The currentcolor keyword represents the value of the element's color property. It can be used to set a property to the same color as the element's text.

As an example:

button {
     color: red;
     background-color: currentcolor;
     border: 2px solid currentcolor;
}

The inherit​

The inherit keyword specifies that a property should inherit its value from its parent element. It can be used to ensure that child elements use the same color as their parent.

As an example:

div {
     color: blue;
}

p {
     color: inherit;
}

In the above example:

  • The text color of the p element will be blue, because it inherits its color from the parent div element.