How can i add a gradient outline to a ui

[GRENINJAPRO_HYPER (Hydroninjapro)]

ive been trying to make an outline gradient where there is a gradient on all sides of the square but they always overlap no matter what,

i tried searching for an outline gradient image but i need to change the gradients color later on and i dont have the resourses to make an outline gradient image myself, if anybody knows how to do it i would really appreciate if i could have the method

[Elaugh14 (zeke)]

Add a UI stroke to your UI, make the stroke white and under your UI stroke add a ui gradient and it should work

[GRENINJAPRO_HYPER (Hydroninjapro)]

im sorry i dont think i explained myself correctly : sob :

what i want is white in the center and black in the borders and transition into eachother as the gradient moves kinda like the image but it looks like a beam i want like a square or a circle i want the light to be surrounded by darkness, but pretty cool trick idek you could do that, def will use for other ui

[Tavikron (Octav)]

What?

[Elaugh14 (zeke)]

You are making no sense, but whatever you are thinking is probably just a UI stroke with a gradient inside.

[GRENINJAPRO_HYPER (Hydroninjapro)]

what im trying to achieve its something kinda like this image i found on pnterest

srry if i caused confusion idk how else to describe it

[Devalvion]

If you’re trying to get an outline image with a specific pattern, simply take your first image and set its ZIndex value to 2 or more. Then take what you want your background gradient to be and make a separate frame with a ZIndex of 1 or less. Then add in your gradient to the background frame and make the background frame slightly larger than your first image, and voila.

[KrxKenDev (KrakenDev)]

I think the term you are searching for is ‘radial gradients’.
You cannot make one in Roblox with UIGradients. However, here’s a way to do it:

Press on the Toolbox → Go to Images → Type ‘Vignette’ and find a white one with no background → Copy the ID → Insert an ImageLabel on your UIElement and set it’s size to 1,0,1,0 → Set the BackgroundColor of your UIElement to whatever you want, and the Vignette’s ImageColor3 to whatever you want too.

Make sure the ImageLabel’s ZIndex is higher than your UIElement, of course.

[GRENINJAPRO_HYPER (Hydroninjapro)]

Tysm KrakenDev i had no idea what it was called or how to do it i will tag you as the solution tysm : )