PcoWSkbVqDnWTu_dm2ix
Collapse Sidebar
  1. apireference
  2. gui
  3. uigradient

Offset

UIGradient

Vector2

The Offset of a UIGradient determines the scalar translation of the gradient from the center of the parent GuiObject. This value is a scalar translation, meaning that the actual pixel offset is determined by the GuiBase2d/AbsoluteSize|AbsoluteSize of the parent GuiObject. So, a value of (1, 0) would shift the gradient horizontally to the right by a distance equal to the parent GuiObject’s on screen-size. Depending on the UIGradient/Rotation|Rotation, this may cause the gradient to be partially visible or not visible at all.

An animation of a UIGradient's Offset being animated on the X axis from -1 to 1.

In the animation above, the offset of a UIGradient is animated back and forth between the values (-1, 0) and (1, 0). The red dot indicates the start of the gradient, and the blue dot indicates the end. Note how the distance animated is twice that of the frame’s width, as the offset is scalar.

See Also

  • articles/Applying UIGradients, for more information on creating UIGradient objects and how they work.

  • UIGradient/Rotation, which also affects the geometry of the applied gradient

Code Samples

UIGradient.Offset Animation

This code sample demonstrates a simple animation of the UIGradient/Offset|Offset property of a UIGradient. It animates the property linearly from (1, 0) to (-1, 0). This causes a sort of sheen effect.

local OFFSET_SPEED_X = 1 -- units per second
local uiGradient = script.Parent
local RunService = game:GetService("RunService")
 
local function onRenderStep(deltaTime)
    local currentOffsetX = uiGradient.Offset.X
    if currentOffsetX < -1 then
        uiGradient.Offset = Vector2.new(1, 0)
    else
        uiGradient.Offset = Vector2.new(currentOffsetX - OFFSET_SPEED_X * deltaTime, 0)
    end
end
 
RunService.RenderStepped:Connect(onRenderStep)