--- title: "UI appearance modifiers" url: /docs/en-us/ui/appearance-modifiers last_updated: 2026-06-24T17:13:44Z description: "Explains how to use appearance modifiers to customize basic user interface objects." --- # UI appearance modifiers By utilizing **appearance modifiers**, you can further customize the appearance of your `Class.GuiObject|GuiObjects`. - Apply a [gradient](#gradient) to the background of an object. - Apply a [stroke](#stroke) to text or a border. - Set [rounded corners](#corners) for an object. - Increase [padding](#padding) between the borders of an object. - Add a [drop shadow](#shadow) behind an object. ## Gradient The `Class.UIGradient` object applies a color and transparency gradient to its parent `Class.GuiObject`. You can configure the gradient by: - Setting its [colors](#color-sequence) through a `Datatype.ColorSequence` in the gradient's `Class.UIGradient.Color|Color` property. - Setting its [transparency](#transparency) through a `Datatype.NumberSequence` in the gradient's `Class.UIGradient.Transparency|Transparency` property. - Choosing the gradient's starting point (inside or outside the parent's bounds) through the `Class.UIGradient.Offset|Offset` property. - Choosing the gradient's angle through the `Class.UIGradient.Rotation|Rotation` property. ### Color sequence To set a gradient's color sequence: 1. In the [Explorer](/docs/en-us/studio/explorer.md) window, select the `Class.UIGradient`. 2. In the [Properties](/docs/en-us/studio/properties.md) window, click inside the `Class.UIGradient.Color|Color` property field, then click the **⋯** button to the right of the input box. A color sequence pop-up displays. Each triangle on the bottom axis of the color sequence is a **keypoint** that determines the color value at that point.![Color sequence popup from white to white](../assets/studio/general/ColorSequence-White-Keypoints-Labeled.png) 3. Click a keypoint in the color sequence, then click the small square next to **Color** to open the **Colors** pop-up window. 4. Select the desired color for the keypoint.![Color sequence popup from red to white](../assets/studio/general/ColorSequence-Red-White.png) 5. If needed, you can: - Add another keypoint by clicking anywhere on the graph. - Drag an existing keypoint to a new position, or select a keypoint and enter a specific time value through the **Time** input. - Delete a keypoint by selecting it and clicking the **Delete** button. - Reset the sequence by clicking the **Reset** button. ### Transparency To adjust a gradient's transparency across its range: 1. In the [Explorer](/docs/en-us/studio/explorer.md) window, select the `Class.UIGradient`. 2. In the [Properties](/docs/en-us/studio/properties.md) window, click inside the `Class.UIGradient.Transparency|Transparency` property field, then click the **⋯** button to the right of the input box. A number sequence pop-up displays. Each square across the number sequence graph is a **keypoint** that determines the transparency value at that point.![Keypoints labeled in number sequence popup](../assets/studio/general/NumberSequence-0-0-Keypoints-Labeled.png) 3. Click and drag any keypoint around, or select a keypoint and enter a specific time/value combination through the **Time** and **Value** inputs.![Number sequence popup from 0 to 1](../assets/studio/general/NumberSequence-0-1.png) 4. If needed, you can: - Add another keypoint by clicking anywhere on the graph. - Delete a keypoint by selecting it and clicking the **Delete** button. - Reset the sequence by clicking the **Reset** button. ### Offset and rotation The `Class.UIGradient.Offset|Offset` and `Class.UIGradient.Rotation|Rotation` properties let you adjust the gradient's control points and its angle. As illustrated in the following diagrams, `Class.UIGradient.Offset|Offset` is based on a **percentage** of the parent's width or height, and both positive or negative values are valid. _`Class.UIGradient.Offset|Offset.X` = `0`_ _`Class.UIGradient.Offset|Offset.X` = `0.25`_ _`Class.UIGradient.Offset|Offset.X` = `-0.25`_ Similarly, when you rotate the gradient, the control points also rotate: _`Class.UIGradient.Rotation|Rotation` = `0`_ _`Class.UIGradient.Rotation|Rotation` = `45`_ _`Class.UIGradient.Rotation|Rotation` = `-90`_ ## Stroke The `Class.UIStroke` instance applies an outline to text or a border. Key features include: - Adjustable [color](#color-or-gradient) and [thickness](#thickness) of the stroke outline. - Ability to set the stroke [transparency](#transparency-1) independently of the parent's transparency. - Customizable [position and/or offset](#border-positionoffset) relative to the parent's border. - Three [corner styles](#corner-style) (round, bevel, or miter). - Stroke [gradient](#color-or-gradient) support through the `Class.UIGradient` instance. ### Thickness You can set the stroke width through the `Class.UIStroke.Thickness|Thickness` property which is measured in pixels (default) or scaled relative to the parent, depending on the modifier's `Class.UIStroke.StrokeSizingMode|StrokeSizingMode`. If stroke is on text and `Class.UIStroke.StrokeSizingMode|StrokeSizingMode` is set to `Enum.StrokeSizingMode.ScaledSize|ScaledSize`, thickness is relative to the font size. _`Class.UIStroke.Thickness` = `4`_ _`Class.UIStroke.Thickness` = `12`_ > **Warning:** Avoid [tweening](/docs/en-us/ui/animation.md) the `Class.UIStroke.Thickness|Thickness` property of a `Class.UIStroke` instance applied to **text** objects. This renders and stores many glyph sizes each frame, potentially causing performance issues or text flickering. ### Color or gradient You can set the stroke color through the `Class.UIStroke.Color|Color` property, as well as insert a child `Class.UIGradient` instance to create gradient strokes. _`Class.UIStroke.Color` = `(0, 95, 225)`_ _`Class.UIStroke` with `Class.UIGradient` child_ > **Info:** Both the parent object and `Class.UIStroke` can have child `Class.UIGradient` instances, letting you set gradients on the **stroke** and **fill** independently. ### Text outline or border Depending on its parent type, `Class.UIStroke` operates as either a **text outline** or as a **border**. When you parent `Class.UIStroke` to a text object like `Class.TextLabel`, it applies to the text's outline; when you parent `Class.UIStroke` to other `Class.GuiObject|GuiObjects`, it applies to the border. _`Class.TextLabel` with `Class.UIStroke` child_ _`Class.Frame` with `Class.UIStroke` and `Class.UICorner` children_ When applied to a text object, you can override the default stroke behavior by the `Class.UIStroke.ApplyStrokeMode|ApplyStrokeMode` property, letting you apply the stroke to the object's bounds instead of the text itself. You can even control the text outline and border independently by parenting two `Class.UIStroke` instances to a text object, one set to **Contextual** and the other to **Border**. _`Class.UIStroke.ApplyStrokeMode` = `Enum.ApplyStrokeMode.Contextual|Contextual`_ _`Class.UIStroke.ApplyStrokeMode` = `Enum.ApplyStrokeMode.Border|Border`_ ### Border position/offset `Class.UIStroke.BorderStrokePosition|BorderStrokePosition` sets the stroke's position relative to its parent's border and `Class.UIStroke.BorderOffset|BorderOffset` lets you specify an additional offset to the stroke's position. _`Class.UIStroke.BorderStrokePosition|BorderStrokePosition` = `Enum.BorderStrokePosition.Center|Center`_ _`Class.UIStroke.BorderStrokePosition|BorderStrokePosition` = `Enum.BorderStrokePosition.Inner|Inner`_ _`Class.UIStroke.BorderStrokePosition|BorderStrokePosition` = `Enum.BorderStrokePosition.Outer|Outer`_ _`Class.UIStroke.BorderOffset|BorderOffset` = `(0.15, 0)`_ _`Class.UIStroke.BorderOffset|BorderOffset` = `(0, -16)`_ ### Transparency The `Class.UIStroke.Transparency|Transparency` property sets the stroke transparency independently of the parent object's `Class.GuiObject.BackgroundTransparency|BackgroundTransparency` or `Class.TextLabel.TextTransparency|TextTransparency`. This allows you to render text and borders that are "hollow" (consisting of only an outline). _`Class.TextLabel.TextTransparency` = `0``Class.UIStroke.Transparency` = `0.5`_ _`Class.TextLabel.TextTransparency` = `1``Class.UIStroke.Transparency` = `0`_ ### Corner style The `Class.UIStroke.LineJoinMode|LineJoinMode` property lets you control how corners are interpreted. It accepts a value of either `Enum.LineJoinMode.Round|Round`, `Enum.LineJoinMode.Bevel|Bevel`, or `Enum.LineJoinMode.Miter|Miter`. _`Class.UIStroke.LineJoinMode|LineJoinMode` = `Enum.LineJoinMode.Round|Round`_ _`Class.UIStroke.LineJoinMode|LineJoinMode` = `Enum.LineJoinMode.Bevel|Bevel`_ _`Class.UIStroke.LineJoinMode|LineJoinMode` = `Enum.LineJoinMode.Miter|Miter`_ ### Layering To layer multiple sibling `Class.UIStroke` instances on a `Class.GuiObject` from front to back, you can utilize the `Class.UIStroke.ZIndex|ZIndex` property. Those with a lower `Class.UIStroke.ZIndex|ZIndex` render under (behind) those with a higher `Class.UIStroke.ZIndex|ZIndex`. Note that the rendering order for `Class.UIStroke` instances with the same `Class.UIStroke.ZIndex|ZIndex` is undefined. Do not apply multiple `Class.UIStroke` instances with the same index if their rendering order matters. ## Corners The `Class.UICorner` instance applies deformation to the corners of its parent `Class.GuiObject`. You can control the applied radius through the `Class.UICorner.CornerRadius|CornerRadius` property using either `Datatype.UDim.Scale|Scale` or `Datatype.UDim.Offset|Offset`. `Datatype.UDim.Scale|Scale` rounds the corners to a **percentage** based on the total length of the **shortest** edge of the parent, meaning that a scale of `0.5` or higher deforms the parent into a "pill" shape, regardless of its width or height. `Datatype.UDim.Offset|Offset` rounds the corners to a specific number of **pixels**, regardless of the width/height of the parent. _`Datatype.UDim.Scale|Scale` = `0.25`  ·  `Datatype.UDim.Offset|Offset` = `0`_ _`Datatype.UDim.Scale|Scale` = `0.5`  ·  `Datatype.UDim.Offset|Offset` = `0`_ _`Datatype.UDim.Scale|Scale` = `0`  ·  `Datatype.UDim.Offset|Offset` = `32`_ _`Datatype.UDim.Scale|Scale` = `0`  ·  `Datatype.UDim.Offset|Offset` = `64`_ You can also control **individual corners** through the `Class.UICorner.TopLeftRadius|TopLeftRadius`, `Class.UICorner.TopRightRadius|TopRightRadius`, `Class.UICorner.BottomRightRadius|BottomRightRadius`, and `Class.UICorner.BottomLeftRadius|BottomLeftRadius` properties. > **Success:** The ability to set individual corners is currently in beta. Enable the capability through **File** ⟩ **Beta Features** ⟩ **New UI Capabilities**. During this Studio beta period, you cannot publish live games that use individually rounded UI corners._`Class.UICorner.TopLeftRadius|TopLeftRadius` = `(0, 0)``Class.UICorner.TopRightRadius|TopRightRadius` = `(0, 48)``Class.UICorner.BottomRightRadius|BottomRightRadius` = `(0, 48)``Class.UICorner.BottomLeftRadius|BottomLeftRadius` = `(0, 0)`_ ## Padding A `Class.UIPadding` object applies top, bottom, left, and/or right padding to the contents of the parent `Class.GuiObject`. For example, you can move the text inside a text label downward or upward by applying an offset to the modifier's `Class.UIPadding.PaddingBottom|PaddingBottom` property. _`Class.TextLabel` without `Class.UIPadding`_ _`Class.UIPadding.PaddingBottom|PaddingBottom` = `(0, -20)`_ _`Class.UIPadding.PaddingBottom|PaddingBottom` = `(0, 30)`_ ## Shadow > **Success:** This feature is currently in beta. Enable it through **File** ⟩ **Beta Features** ⟩ **New UI Capabilities**. During this Studio beta period, you cannot publish live games that use UI shadows. A `Class.UIShadow` object renders a drop shadow behind its parent UI instance. Key features include: - Adjust the shadow's [bluriness](#bluriness). - Adjust the shadow's [color and transparency](#color-and-transparency). - Adjust the shadow's [offset and spread](#offset-and-spread). - If the parent is rotated by `Class.GuiObject.Rotation`, the shadow will also be rotated. - If the parent has [round corners](#corners), the shadow will also have round corners. > **Info:**`Class.UIShadow` does not support text. If you add this modifier to a `Class.TextLabel` or `Class.TextButton`, it renders a shadow of the object's rectangular bounding area, not of the text. ### Bluriness The `Class.UIShadow.BlurRadius|BlurRadius` property determines the shadow's blurriness. A larger value makes the shadow's edges appear softer. Note that the **scale** factor of this `Datatype.UDim` property is relative to the parent's width or height, whichever is shorter. _`Class.UIShadow.BlurRadius|BlurRadius` = `(0, 0)`_ _`Class.UIShadow.BlurRadius|BlurRadius` = `(0.75, 0)`_ ### Color and transparency The `Class.UIShadow.Color|Color` property determines the shadow's color, while `Class.UIShadow.Transparency|Transparency` sets the shadow's transparency with `0` being fully opaque and `1` being fully transparent. _`Class.UIShadow.Color|Color` = `(255, 255, 255)`  ·  `Class.UIShadow.Transparency|Transparency` = `0.6`_ _`Class.UIShadow.Color|Color` = `(50, 0, 35)`  ·  `Class.UIShadow.Transparency|Transparency` = `0`_ ### Offset and spread The `Class.UIShadow.Offset|Offset` property moves the shadow relative to the parent's position, while `Class.UIShadow.Spread|Spread` expands or shrinks the shadow relative to the parent's size. _`Class.UIShadow.Offset|Offset` = `{0, -14}, {0, 6}`_ _`Class.UIShadow.Offset|Offset` = `{0.1, 0}, {-0.15, 0}`_ _`Class.UIShadow.Spread|Spread` = `{0, 10}, {0, 10}`_ _`Class.UIShadow.Spread|Spread` = `{0.3, 0}, {0.3, 0}`_