Glow simulation using gradients

Hi guys,

I’m working on some knobs that need a glow effect on its dial.

Schermata 2022-08-02 alle 17.15.45

The knob graphic is coded, so I cannot use the glow effect (which only accepts an image as input). Pre-rendering the resulting path as an image is a no go, so I’m wondering if there’s a way to simulate a glow using gradients.

I never used ColorGradient before, so any hint would be appreciated.


You can draw to an Image, then apply the glow effect and then paint the image. However, it’s probably just easier and faster to increase the size of the path you have by 2 or 3 px in each direction and draw it again with a 50% transparent colour.

Thanks Roland. That’s basically what I had in mind, to superimpose a resized version of the original path filled with a semi-transparent gradient. My biggest problem is to understand how to make the gradient working as expected on an arc path.

You do a for-loop and draw the path 3-5 times, each time a bit bigger/thicker and the alpha decreasing exponentially.

1 Like

Yea, I guess that’s a workaround. I’ll also try with dropShadow to see if I can get something nice.

Thank you all, guys.

Unfortunately DropShadow isn’t very performant, you’d probably get better results from rendering your Path to an Image and then using the stack blur implementation in Roland’s Gin module, but that might not be what you’re after since you weren’t too enamoured with the glow effect having to use an image.

also bear in mind that brightness should drop off at an inverse square rate, to get that realistic look.

1 Like

I kind of understand the approach but could you help me in details in terms of code example in the looknfeel part, Im stuck at this part and I would really appreciarte the help to improve on my knob design, thanks!!!

Could you help me in details for this part as Im not a seasoned engineer, but I already have my custom knob coded, I just need a simple glow/ gradient effect.