currentColor

The keyword currentColor can be used as a value for a CSS property that accepts color. For example, background-color. The browser will replace currentColor with the current value of the color property.

Let's take a small piece of text, set the desired text color, and add a shadow. In the place where we need to set the shadow color, we use the keyword currentColor:

        
          
          .element {  color: darkblue;  box-shadow: 0 0 5px currentColor;}
          .element {
  color: darkblue;
  box-shadow: 0 0 5px currentColor;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

The shadow is drawn in the same color as the text of the element.

The principle of operation is very similar to custom properties in CSS: we take a variable, assign a value, and use it in the places we need. The only difference is that we do not create a separate variable, but use a ready-made keyword.

If custom properties are unfamiliar to you, there is another good analogy — the keyword inherit. We use it as a value for the required property, and when this style changes for the parent, the style will immediately change in the descendant. The downside of this approach is that we can only apply this value to the property that needs to be inherited, and not to several.

There is one point that should not be forgotten. If you specified the text color and several properties where currentColor is used, and then overridden color, the last specified color will apply to all properties.

        
          
          .element {  color: red;  border: 3px solid currentColor;  box-shadow: 0 0 5px currentColor;  color: black;}
          .element {
  color: red;
  border: 3px solid currentColor;
  box-shadow: 0 0 5px currentColor;
  color: black;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Everything will be black.

Here the same cascading principle works — rules written below override those written above.

        
          
          <button>  <span>Delete</span>  <svg>...</svg></button>
          <button>
  <span>Delete</span>
  <svg>...</svg>
</button>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

        
          
          button {  color: #0d47a1;}svg {  fill: currentColor;}
          button {
  color: #0d47a1;
}

svg {
  fill: currentColor;
}

        
        
          
            
            Copy
            Copied
            Failed to copy