UIGradient editor

Build a Roblox UIGradient by eye: drag the colour and transparency keypoints, set the rotation and offset, then copy the Luau. Already have one? Paste its code under the output to keep editing it.

$ preview

object size corner object colour backdrop

Matches live games: Rotation is measured on screen and the gradient's ends sit on the object's edges, so a wide frame at 45° has solid corners. Studio's Upgraded UIGradients beta (radial gradients, linear-colour blending) isn't modelled yet.

$ edit UIGradient

Color

time colour hex

Transparency

time value

Rotation & Offset

Rotation Offset X Offset Y

Animate (TweenService)

seconds

Presets

$ cat gradient.lua

create the Instance skip default values Parent =

paste existing Luau to edit it

Paste a ColorSequence, NumberSequence, or a whole UIGradient setup. Color3.fromRGB, Color3.new, Color3.fromHex and Color3.fromHSV all work.