CSS Color Keywords

This page will explain the transparent, currentcolor, and inherit keywords.

transparent

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

Example

#div1 {
  background-image: url("paper-gif1.jpg");
}

#div2{ 
  background-color: pink;
  border: 2px solid black;
  padding: 15px;
}

#div3 { 
  background-color: transparent;
  border: 2px solid black;
  padding: 15px;
}

Output

The transparent Keyword

This div has a light green background.

This div has a transparent background.

The background color of the <div> element will be fully transparent, and the background image will show through.

currentcolor

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.

In this example the border color of the <div> element will be red, because the text color of the <div> element is red:

Example

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

Output

This div element has a blue text color and a blue border.

In this example the <div> background color is set to the current color value of the body element.

Example

body {
  color: green;
}

div {
  background-color: currentcolor;
  padding: 15px;
}

div p {
  color: white;
}

Output

This div's background color is set to the current color value of the body element.

In this example the <div> border color and shadow color is set to the current color value of the body element.

Example

body {
  color: green;
}

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

Output

This div's border color and shadow color is set to the current color value of the body element.

inherit

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;
}

You can click on above box to edit the code and run again.

Output

Here, the span element's border settings will be inherited from the parent element.

Here, the span element's border settings will also be inherited from the parent element.