NightyCode
Roblox profile
All tools Pattern studio

Gradient & Glow

Soft glows and gradients as PNG, with the matching UIGradient code.

Type
Gradient

Tip: drag on the preview to move or turn it.

Colors
Colors

Click the bar to add a color. Drag a stop off the bar, or press Delete, to remove it.

Stop 1 of 3
%
Softness
Falloff

Adds tiny noise you cannot see, so soft gradients get no stripes.

Background
Background
Size

Roblox shrinks uploaded images to 1024 px at most. Game thumbnails are 1920 × 1080 and game icons 512 × 512.

1024 × 1024 px

Roblox UIGradient code

The Roblox code is for Linear gradients. For round and sweeping glows, download the see-through PNG and show it in an ImageLabel.

How it works

  1. Pick a type

    Radial for round glows, Linear for straight gradients, Conic for sweeps. Or start from a look under the preview.

  2. Set the colors

    Click the color bar to add a stop, drag stops to move them, and fade any stop to see-through with its opacity.

  3. Use it

    Download the PNG, or for Linear gradients copy the UIGradient code and paste it into Roblox Studio.

Everything is drawn in your browser. Nothing is uploaded.

Questions

Where do I paste the UIGradient code?
Put it in a LocalScript inside the Frame or ImageLabel you want to color, then press Play. Or copy just the Color, Transparency and Rotation lines into your own script.
Why do the colors look different in Roblox?
UIGradient tints the color the frame already has. Set the Frame’s BackgroundColor3 to white (255, 255, 255) and the colors match the preview exactly.
Does the preview match what Roblox shows?
Yes, for Linear gradients the preview follows UIGradient’s rules: Rotation turns clockwise, and the start and end sit on the frame’s edges, so on a wide frame the end colors fill the far corners.
How many colors can I use?
Up to 12 stops. Roblox allows 20 keypoints per sequence, and the code always stays within that, even with a falloff curve.
What does “Smooth out banding” do?
Soft gradients can show stripes because screens only have 256 shades per color. Tiny noise hides those stripes. Keep it on.
How do I make a round glow in Roblox?
Download the Radial glow see-through, upload it, and show it in an ImageLabel with BackgroundTransparency 1. Spin or pulse it with TweenService for extra shine.

See all 19 tools