How can I make fade out effect like this?

Gradient transparency fade out effect

UI Gradients don’t have that option, you will need a form of overlay. They most likely have a large donut shape that they zoom out or something, you can’t really do this purely with roblox tools. I would recommend attempting to manually create the effect with a plugin: [Plugin] Gradientifier, then use code to automate the process between two frames.

2 Likes

I tried but maybe the plugin is not for sale anymore. Is there another way?

I fixed this problem like this.

  1. make circle gradient image with figma.
    image
    (RGB 0% is 1 transparency in roblox)

  2. And put image to image label in roblox studio
    image
    (Set Background transparency to 1, size to 1, 0, 1, 0 and anchor point to 0.5, 0.5)

  3. Put this code

local TweenService = game:GetService("TweenService")

local gradientImage = script.Parent

local tween = TweenService:Create(gradientImage, TweenInfo.new(2), {Size = UDim2.new(200, 0, 200, 0)}) --You can change tweeninfo and size

tween:Play()