---
title: CSS Color Keywords
description: "> 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…"
url: "https://apprentice.mn/docs/css-color-keywords/"
updated: "2021-05-11"
category: CSS
---

# 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("paper.gif");
}

div {
  background-color: transparent;
}`

**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. Read more in our [CSS RGB](https://apprentice.mn/docs/css-rgb-colors/) chapter and in our [CSS Colors](https://apprentice.mn/docs/css-colors/) chapter.

---

##  

## 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 element will be blue, because the text color of the 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

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;
}`        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-color-keywords%2F&linkname=CSS%20Color%20Keywords](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-color-keywords%2F&linkname=CSS%20Color%20Keywords)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-color-keywords%2F&linkname=CSS%20Color%20Keywords](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-color-keywords%2F&linkname=CSS%20Color%20Keywords)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-color-keywords%2F&linkname=CSS%20Color%20Keywords](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-color-keywords%2F&linkname=CSS%20Color%20Keywords)[https://www.addtoany.com/share](https://www.addtoany.com/share)