How to apply blur radius?

[buitrbao222]

Hello there.
First of all I want to thank you for this amazing library.

It's been good so far, but my shadow looks too hard.
How can I blur it? Like in css drop-shadow we have the blur property?

I want to make a shadow like this:
box-shadow: 0px 4px 15px #072A4233;

Here are the options that I passed in:

offset={[0, 4]}
startColor="#072A4233"
finalColor="transparent"

How much distance should I use? And where do I put the blur radius?

Here's the shadow in CSS:
https://codesandbox.io/s/priceless-wind-pvtwx?file=/src/styles.css

Here's what I did in React Native using your library:
https://snack.expo.dev/@buitrbao222/react-native-button-box-shadow

The results are very different.

Thanks so much for your help.

[SrBrahma]

Hi! I am really glad that you liked it! All the nights I've spent tinkering and working on it makes sense when I receive those compliments about it :)

First of all, note that in your second image it doesn't have a #fff backgroundColor, as the first one has.

CSS shadow works differently. I don't know the algorithms behind its graphics. There is no blur parameter in this lib, directly.

Your css example: box-shadow: 0px 4px 15px #072a4233.

Changing to 4px to 50px and the color to black, this is what we have:

You can notice that the color gradient starts to fade before the component size. That doesn't happen by default in this lib; the gradient only start after the component size. The 15px in your css behaves differently from our distance={15}. It's the blur param, not the spread: https://www.w3schools.com/cssref/css3_pr_box-shadow.asp

Here it's the 50 offset (px in web), black color and distance={15} that we get with this lib:

But, it's possible to mimic this behavior with a little hack like this one I came up with:

(Source, built on top of your snack code: https://snack.expo.dev/@srbrahma/ada28a)

Basically, the shadow is wrapping an inner smaller component with absolute positioning. You can fine tune the consts to have a more similar result to the css. But still, we can't make them look exactly the same, as with just SVG gradient of two color points it doesn't seem to be possible to reach that fancy css color decay.

Maybe we should support this hack by default? Like a distanceOffset prop or something like that, to start the shadow transition before or after the component. I ain't sure now if it would work in all cases.

Maybe we should add a prop to create custom gradient intervals instead of the current linear transition?

---

I tried to achieve a similar look without this hack but it doesn't seem to be possible, but maybe you can have a better luck. Try changing the initialColor to a greyer one, different distance... Also, I discovered an interesting situation:

If we change the startColor to #ccc, we have this:

It isn't an optical illusion, it's darker between the start and finalColors.

(darker than #ccc)

It's due to how SVG gradient is changing from #ccc to #0000. If we change the final color to #ccc0, we have a better blur:

Maybe we should default the finalColor to transparent startColor?

Back in the hack example, you can have different (and maybe better) results by changing the finalColor to #fff0 etc.

---

What do you think? What should we do about it?

[SrBrahma]

I've added the improved default finalColor in 6.0.0 via d32dc12.

The distanceOffset prop I may add later. Still unsure if it would be a nice addition to the lib. Opinions about it are welcome ;) Will leave this as open in the meantime.

[FrSenpai]

I've added the improved default finalColor in 6.0.0 via d32dc12.

The distanceOffset prop I may add later. Still unsure if it would be a nice addition to the lib. Opinions about it are welcome ;) Will leave this as open in the meantime.

Hey, I just started to use your lib, and I think it's really important to have the possibility to set distance offsets.
In my case, i'm just waiting for it.
I saw something weird on distance documentation, it's saying we can send an object, but it's only accepting a number. (index.d.ts, line 22)

Great work btw ! 👍

[SrBrahma]

@FrSenpai Thanks for the feeback! :) I will wait for further opinions.

distance property can only accept a number.

In the README we currently have

In the index.d.ts (line 17~33) we have

JSDoc comments are applied to the line below them. If you put your mouse cursor over the distance in VSCode for example, its corresponding comment will show up in the floating window.

[raymondjacobson]

+1 @SrBrahma on distance offset <3 <3 <3

[SrBrahma]

Hi, sorry to say after so long but I no longer have plans on adding this by myself.

PRs are welcome!