Skip to main content

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

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.

Table of Contents