I have three bars of player status, i.e. health, experience, and mana. Health and Mana bars have a normal size and exp bar is minimized.

I apply box-shadow for each of them, styles are almost the same for all bars, however box shadow is not displayed for minimized bar. I tried to fix that and noticed that when I change spread radius to positive value, box shadow appears. If the spread radius is negative, box shadow is not displayed at all.

The code of PARENT element looks this way:

            <div className={styles.barContainer}>
              <Bar
                color={healthBar.color}
                height={healthBar.height}
                currentValue={healthCurrent}
                maxValue={healthMax}
              />
            </div>
            <div className={classNames(styles.barContainer, styles.barContainerSmall)}>
              <Bar
                size="small"
                color={expBar.color}
                height={expBar.height}
                currentValue={expCurrent}
                maxValue={expMax}
              />
            </div>
            <div className={styles.barContainer}>
              <Bar color={manaBar.color} height={manaBar.height} currentValue={10} maxValue={10} />
            </div>

The Bar component looks this way:

      <div
        className={classNames(styles.bar, {
          [styles.smallBar]: size === 'small',
        })}
      >
        <div
          className={styles.barInner}
          style={{
            backgroundColor: color,
            width: `${Math.min(widthPercentage, 100)}%`,
          }}
        />
        {size !== 'small' && (
          <span className={styles.text} style={{ fontSize }}>
            <span className={styles.biggerNumber}>{currentValue}</span>/<span>{maxValue}</span>
          </span>
        )}
      </div>

And styles for the Bar:

    .bar {
  position: relative;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 5px;
  height: 10px;
}

.smallBar {
  height: 5px;
}

.barInner {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.5));
  transition: 0.4s linear;
  transition-property: width;
  animation: progressAnimation 0.5s;
  box-shadow: 0 4px 4px -4px rgba(0, 0, 0, 0.75);
}

.text {
  position: absolute;
  top: -3px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /** TODO: Change font color depending on contrast: https://css-tricks.com/reverse-text-color-mix-blend-mode/ */
  color: #fff;

}

.text .biggerNumber {
  font-size: 20px;
  font-weight: bolder;
}