Color Keywords

CSS Color Keywords

CSS has some special predefined color keywords that can be used with properties like color, background-color and border-color.

The special keywords are:

• transparent
• currentcolor
• inherit

The transparent Keyword

The transparent keyword is used to make a color transparent. This is often used to make a transparent background color for an element.

Example

  body {
  background-image: url("paper.gif");
}

div {

  background-color: transparent;
}

Note: The transparent keyword is equivalent to rgba(0,0,0,0). RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color. Read more in our CSS RGB chapter and in our CSS Colors chapter.

The currentcolor Keyword

The currentcolor keyword is like a variable that holds the current value of the color property of an element.

This keyword can be useful if you want a specific color to be consistent in an element or a page.

Example

  div {
  color: blue;
  border: 10px solid currentcolor;
}

Example

  body {
  color: purple;
}

div {
  background-color:
  currentcolor;
}

Example

  body {
 color: green;
}

div {
  box-shadow: 0px 0px
  15px currentcolor;
  border: 5px solid currentcolor;
}

The inherit Keyword

The inherit keyword specifies that a property should inherit its value from its parent element.

The inherit keyword can be used for any CSS property, and on any HTML element.

Example

  div {
  border: 2px solid red;
}

span {
  border:
  inherit;
}