NightyCode
Roblox profile
All tools Developer helpers

UIGradient Maker

Build a UIGradient with a live preview and copy the Luau code.

Presets

Color

Color

Click the bar to add a color, drag the dots to move them.

Transparency

Shape

Type
deg
Scale and tiling
TileMode

Type, Scale and TileMode are newer UIGradient options. They may be hidden in the Properties window, but they work from scripts.

Animation

Import a gradient

Put this in a LocalScript inside your Frame, TextLabel or ImageLabel.

Ctrl+Z undoes a change.

How it works

  1. Pick or build colors

    Start from a preset, click the bar to add colors (up to 20) and drag them where you want.

  2. Shape it

    Turn the dial for the angle, slide the offset, fade parts out with transparency, or add a shine.

  3. Check the preview

    See it on a frame, a button or text. It's placed exactly the way Roblox places it, even on wide frames.

  4. Copy the code

    Paste the script into a LocalScript, or run the Command Bar version to add it to everything you selected in Studio.

Questions

Why does my gradient look different on a wide frame?
Roblox puts a gradient's start and end on the edges of the object, so at 45 degrees on a wide frame the corners get the end colors. The preview here does the same, so what you see is what you get.
Why are my colors darker in Roblox?
UIGradient multiplies with the object's own color. Keep BackgroundColor3 (or TextColor3, ImageColor3) white to get the exact colors.
How many colors can a UIGradient have?
Up to 20 keypoints for color and 20 for transparency. The first must be at time 0 and the last at time 1; this tool keeps it that way for you.
Can I edit a gradient I already have?
Yes. Open "Import a gradient" and paste its code, a ColorSequence, the text Studio shows for it, or even a CSS linear-gradient from a website.
How do I make a moving shine?
Pick the Shine preset (or Animation: Shine). The code tweens the Offset from -1 to 1 forever, the cheapest way to animate a gradient.
Can I share a gradient?
Copy link saves every setting in the address, so whoever opens it sees the same gradient.

See all 19 tools