Using a --shadow-opacity variable in the rgba of a --box-shadow variable
13:50 15 Feb 2026

Can someone explain why its not possible to override --shadow-opacity right in .box without also redeclaring --shadow?

:root{
  --shadow-opacity: 0.5;
  --shadow: 0px 0px 50px rgba(0,0,0,var(--shadow-opacity));
}
html{
  height:100%
}
body{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
}
.box{
  --shadow-opacity: 0.15;
  /* --shadow: 0px 0px 50px rgba(0,0,0,var(--shadow-opacity)); */
  width:50%;
  aspect-ratio:1/1;
  background:white;
  box-shadow: var(--shadow);
}

css css-variables