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:

body {  
	background-image:  url("img.png");  
}  
  
div {  
	background-color:  transparent;  
}

Explanation:

• 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.

Example:

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

Explanation:

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

Example:

body {  
	color:  purple;  
}  
  
div {  
	background-color:  currentcolor;  
}

Explanation:

• In this example the <div> background 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;  
}

Explanation:

• In this example the <div> 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;  
}

Explanation:

• In this example the <span> border settings will be inherited from the parent element.