Design a Main Menu with UIGradient in Roblox Studio

UIGradient is one of the most powerful tools in Roblox UI design. It transforms flat, boring colors into smooth transitions that look professional and modern. A gradient background immediately makes your game feel more polished.

In this tutorial, we'll build a complete main menu with gradient effects, buttons, and animations. You'll learn how UIGradient works and how to use it to create visually appealing games.

What is UIGradient?

UIGradient is a GuiObject that applies a color gradient to any UI element it's parented to. Instead of a flat color, you can blend two or more colors smoothly across the element.

Key properties:

• Color — A ColorSequence that defines the gradient colors. By default it goes from white to black.
• Rotation — Angle of the gradient in degrees (0–360). 0 is left to right, 90 is top to bottom.
• Transparency — NumberSequence for fading the gradient in and out.
• Offset — Shifts where the gradient starts, useful for animations.

The gradient will always match the shape and size of its parent element.

Set Up the ScreenGui

First, create the container for your menu:

1. In the StarterGui folder, insert a ScreenGui.
2. Name it MainMenuGui.
3. In the Properties panel, set ResetOnSpawn to false (so the menu stays visible).
4. Set IgnoreGuiInset to true (covers the entire screen including top bar).

Now you have a ScreenGui that fills the whole screen and won't disappear when the player respawns.

Create the Background Frame

Inside MainMenuGui, insert a Frame. This will hold the gradient background:

1. Right-click MainMenuGui → Insert Object → Frame.
2. Name it Background.
3. Set Size to {1, 0}, {1, 0} (fills the screen).
4. Set Position to {0, 0}, {0, 0} (top-left corner).
5. Set BackgroundColor3 to any color (this will be covered by the gradient, but it's good practice).
6. Set BorderSizePixel to 0.

Add UIGradient to the Background

Now add the gradient effect:

1. Right-click Background → Insert Object → UIGradient.
2. In the Properties panel, find the Color property. Click it to open the ColorSequence editor.
3. Click the gradient bar twice to create two color stops. Set the left color to a dark blue (0, 0.2, 0.4) and the right color to a cyan (0, 0.8, 1).
4. Set Rotation to 45 (diagonal gradient).

Your background now has a smooth color transition. The gradient rotates at 45 degrees, flowing from top-left to bottom-right.

Design the Menu Panel

Create a centered panel that holds your menu buttons:

1. Inside MainMenuGui, insert another Frame. Name it MenuPanel.
2. Set Size to {0, 400}, {0, 300} (400x300 pixels).
3. Set AnchorPoint to {0.5, 0.5} (centers from middle).
4. Set Position to {0.5, 0}, {0.5, 0} (centers on screen).
5. Set BackgroundColor3 to white or light gray.
6. Add a UICorner and set CornerRadius to {0, 10} for rounded corners.

Now add a subtle gradient to the panel itself:

1. Right-click MenuPanel → Insert Object → UIGradient.
2. Set the colors to white (top) to light gray (bottom) for a soft depth effect.
3. Set Rotation to 180 (top to bottom).

Add Buttons to the Menu

Create a play button inside MenuPanel:

1. Inside MenuPanel, insert a TextButton. Name it PlayButton.
2. Set Size to {0, 300}, {0, 50}.
3. Set Position to {0, 50}, {0, 80} (top area of panel).
4. Set Text to "PLAY".
5. Set TextSize to 24.
6. Set BackgroundColor3 to a green color, like (0, 0.7, 0.3).
7. Add a UICorner with CornerRadius {0, 8}.

Add a gradient to the button to make it pop:

1. Right-click PlayButton → Insert Object → UIGradient.
2. Set colors from bright green (top) to darker green (bottom).
3. Set Rotation to 180.

Repeat the same process for a SettingsButton and ExitButton below the play button. Space them evenly within the panel.

Script Button Interactions

Create a LocalScript inside StarterPlayer to handle button clicks. This script lives in StarterPlayer → StarterCharacterScripts or StarterPlayer → StarterPlayerScripts (we'll use the latter since it runs before the character loads):

local gui = script.Parent:WaitForChild("MainMenuGui")
local playButton = gui.MenuPanel.PlayButton
local settingsButton = gui.MenuPanel.SettingsButton
local exitButton = gui.MenuPanel.ExitButton

playButton.MouseButton1Click:Connect(function()
    print("Play button clicked!")
    -- Load the game level
    -- You can teleport the player or load a different scene
end)

settingsButton.MouseButton1Click:Connect(function()
    print("Settings button clicked!")
    -- Show settings menu
end)

exitButton.MouseButton1Click:Connect(function()
    print("Exit button clicked!")
    game:Shutdown() -- Close the game (works in standalone/published games)
end)

This script waits for the GUI to load, then connects click events to each button. When a button is clicked, a function runs.

Animate the Menu with UIGradient

Create a LocalScript inside the MenuPanel to animate its gradient:

local menuPanel = script.Parent
local gradient = menuPanel:FindFirstChild("UIGradient")

if not gradient then return end

local offset = 0
local speed = 0.5 -- How fast the animation moves

while true do
    offset = offset + speed / 100
    if offset > 2 then offset = 0 end -- Loop
    
    gradient.Offset = Vector2.new(offset, 0)
    task.wait(0.02) -- 50 FPS animation
end

This script continuously shifts the gradient's offset, creating a flowing animation effect. The gradient moves smoothly across the panel.

To make button gradients animate on hover, add this to your button script:

local playButton = gui.MenuPanel.PlayButton
local buttonGradient = playButton:FindFirstChild("UIGradient")

playButton.MouseEnter:Connect(function()
    -- Brighten the gradient on hover
    if buttonGradient then
        buttonGradient.Transparency = NumberSequence.new(0.1) -- Slightly transparent
    end
    playButton.BackgroundColor3 = Color3.fromRGB(50, 200, 100) -- Brighter green
end)

playButton.MouseLeave:Connect(function()
    -- Return to normal
    if buttonGradient then
        buttonGradient.Transparency = NumberSequence.new(0)
    end
    playButton.BackgroundColor3 = Color3.fromRGB(0, 180, 77) -- Original green
end)

Now buttons brighten when the player's mouse hovers over them, giving instant visual feedback.