'How to update individual values of the box-shadow property?

I'd like to override the distance on box-shadow without having to set the color again.

Use case here is I have a .button class with this:

.button {
  color: white;
  background: blue;
  padding: 8px 15px;
  font-size: 1.2em;
  border: 3px solid black;
  box-shadow: 0 3px 0 black;
}

Then I have a .button-small class that is effectively a child of .button that makes some minor tweaks to things. 

.button.button-small {
  padding: 4px 10px;
  font-size: 1em;
  border-width: 2px;
  box-shadow: 0 2px 0 black;
}

As you can see, I can easily change the border-width without redefining the entire border property.

Is there a way to do that with box-shadow? Some sort of box-shadow-distance property?

css


Solution 1:[1]

Use CSS variables:

.button {
  color: white;
  background: blue;
  padding: 8px 15px;
  font-size: 1.2em;
  border: 3px solid black;
  box-shadow: 0 var(--d, 5px) 0 black; /* 5px is the fallback/default value until you set the variable */
}

.button.button-small {
  --d: 2px;
}
<span class="button">button</span>

<span class="button button-small">button</span>

<span class="button" style="--d:8px;">button</span>

Solution 2:[2]

Unlike other properties, such as border, in which the parts are broken up into sub-properties, the box-shadow property stands alone. This means that it is even more important to take note of the order in which the parts are stated, particularly the length values. The box-shadow Property

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Temani Afif
Solution 2 Alireza HI

Related Questions