GUI Neon/Glow Effect

I want to have a glow/neon effect with bloom on specific GUI elements E.G ImageLabels and Frames.

I can’t figure out a way to achieve this without having to convert elements to a image, then apply manual glow there and merge it back.

I have tried raising the alpha color value which didn’t work, neither can I find any topics about this anywhere on the forum.

9 Likes

Add a dropshadow of the same color as that element, it will make it look like it’s glowing. But, you’ll need to use an external service for the dropshadow.

3 Likes

I don’t think this is a feature in Roblox Studio, and I personally think that it should be. Glowing UI elements will make UIs look so much better.

2 Likes

I tried attaching a neon part towards the player camera, it gives the desired effect however this doesn’t fit due to different resolutions.

local Camera = workspace.CurrentCamera
local Model = Instance.new(“Part”)
Model.CanCollide = false
Model.Anchored = true
Model.Name = “alarm_icon_NEON”
Model.Material = “Neon”
Model.Parent = workspace
Model.Size = Vector3.new(0.77, 1, 0.2)
Model.BrickColor = BrickColor.new(255, 0, 0)
local function update()
Model.CFrame = Camera.CFrame * CFrame.new(-5.15, 0.30735, -5) * CFrame.Angles(0, 0, 0)
end
Camera:GetPropertyChangedSignal"CFrame":Connect(update)
update()

Tried viewportframes but they don’t show the neon effect.

Adding onto Carbyne’s point, there is a plugin that allows you to do this. You can find it
here
The only downside to it is that is costs 100 robux.

2 Likes

(Really sorry for the bump, but others may still find this topic unsolved/or need help.)

Yes, there is a really simple way.
Why not just use an image?

Use this image glow (Click it, then save).

Insert it as an ImageLabel underneath your frame and boom! Of course this image is white, so change it to any color you want.

Example of how it could look:
image

8 Likes

If you have a UI that’s drastic and wouldn’t be able to use the above, you can try blurring the original image itself and exporting both the blurred image (which gives the glowy effect) and the original image to studio. Technically the same as the mentioned above but this is mainly for if you have different shaped UIs.

1 Like

If the image would fit the ui “style”, you could also change the image to “slice” and edit it’s size, it would probably do the same.