CSS Color Keywords

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

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

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

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

div {
  background-color: transparent;
}

Try it Yourself »

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

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

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

Try it Yourself »

Example

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

body {
  color: purple;
}

div {
  background-color: currentcolor;
}

Try it Yourself »

Example

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

body {
 color: green;
}

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

Try it Yourself »

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

In this example the <span>'s border settings will be inherited from the parent element: 

div {
  border: 2px solid red;
}

span {
  border: inherit;
}

Try it Yourself »