CSS custom properties in box-shadow color function render incorrectly in Safari

It's a Safari bug: https://bugs.webkit.org/show_bug.cgi?id=185940

The only way to make custom properties work in box-shadow, is to put the whole color into variable

.item {
  --color: rgba(200, 0, 0, 0.5);
  box-shadow: 0 0 10px var(--color);
}

Edit: looks like it is fixed since Safari 13.0.3

I have got a solution to your problem, if you simply add variable color in box shadow then it won't work in Safari browser. However by doing some manipulation in code, you can do it easily.

Here are few steps to do..

1. Select any root color in RGB value.

   :root {
        --color: 130, 16, 253;
    }
   

2. Add same color but with some opacity to root for box shadow. Here is a trick you are using one variable in another --shadowColor variable.

   :root {
       --color: 130, 16, 253;
       --shadowColor: 0px 10px 50px 0px rgba(var(--color), 0.08);
   }
   

3. Apply color and box shadow to any object.

   .feature_box
   {   
       color: rgba(var(--color), 1);
       -webkit-box-shadow: var(--shadowColor);
       box-shadow: var(--shadowColor);
   }
   

   Enjoy:)