CSS Color Keywords
The terms transparent, currentcolor, and inherit will be explained on this page.
The transparent Keyword
To make a color transparent, use the transparent keyword. This is frequently used to create an element’s translucent background color.
Example
Here, the background color of the <div> element will be fully transparent, and the background image will show through:
body {
background-image: url("paper.gif");
}
div {
background-color: transparent;
}
The keyword transparent is the same as rgba(0,0,0,0). RGBA color values are an extension of RGB color values that include an alpha channel to indicate a color’s opacity. See our chapters on CSS RGB and CSS Colors for more information.
The currentcolor Keyword
Similar to a variable, the currentcolor keyword stores the value of an element’s color property at that moment.
If you want a particular color to appear consistently throughout an element or page, this term may be helpful.
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;
}
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;
}
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;
}
The inherit Keyword
A property is supposed to inherit its value from its parent element, according to the inherit keyword.
Any HTML element and any CSS property can be utilized with the inherit keyword.
Example
In this example the <span>’s border settings will be inherited from the parent element:
div {
border: 2px solid red;
}
span {
border: inherit;
}
