Radial Gradient Element
Radial Gradient Elements create smooth, circular color blends emanating from a central point. They’re perfect for spotlight effects, glows, vignettes, or any UI background that needs a soft, circular color transition.
When to Use a Radial Gradient Element
- Spotlight & Highlight
Draw attention to a central UI element. - Vignette
Darken or tint edges of the screen around a bright center. - Circular Backgrounds
Create concentric color transitions behind avatars, buttons, or icons.
Radial Gradient Element Properties
| Property | Type | Details |
|---|---|---|
| Name | text | Name of the element. Make sure the name of the element is unique if the element needs to be accessible from code (Enterprise Plan only). |
| Start center | .% | The center of the starting circle for the radial gradient, in relative coordinates to the element's size. |
| Start Radius | .% | The radius of the starting circle for the radial gradient. |
| End Center | .% | The center of the ending circle for the radial gradient, in relative coordinates to the element's size. |
| End Radius | .% | The radius of the ending circle for the radial gradient. |
| Fill stops | .% | The ending point of each fill color, in relative coordinates to the element's size. Values should span from 0 to 1. |
| Fill colors | Color picker | The colors of each fill stop. The position of the Fill Color corresponds with the Fill Stop in the same position. |
| Fill alphas | .% | Use to set the alpha, or transparency, of each Fill Color. If not set, the default value will be 1 (full opacity). |
| Blend mode | .% | Texture blending mode which affects the visual appearance of the element and how it interacts with other layers. |
| Mask | checkbox | Enable or disable masking. |
| Anchor | .% | Used to position the anchor point of the element (x: 0, y: 0 = top/left, x: 1, y: 1 = bottom/right) |
| Parent Align | .% | Position of the element relative to its parent’s position. (x: 0, y: 0 = top/left, x: 1, y: 1 = bottom/right) |
| Parent Size | .% | Use to resize the element relative to its parent's size (x: 1, y: 1 = match parent size, x: 0.5, y: 0.5 = half of parent size, x: 0, y: 0 = disables parent relative sizing). |
| Size | px | Explicitly set pixel size (logical screen units). |
| Offset | px | Additional pixel offset from the element's position. |
Transform Properties
Transform properties affect the Element, as well as any child elements nested within the Element.
| Property | Type | Notes |
|---|---|---|
| Pivot | .% | Pivot point for any transformations applied to the element. (x: 0, y: 0 = top/left, x: 0.5, y: 0.5 = center, x: 1, y: 1 = bottom/right). |
| Angle | Degrees | Rotate the element around its Pivot point. |
| Skew | Degrees | Skew along X/Y axes around the Pivot point. |
| Scale | .% | Percentage scale of the element. Setting this value to x: 2, y: 2 scales the element twice as large. |
| Alpha | .% | Transparency applied to the element. The default value 1 displays the element fully opaque, while 0.5 would make the element semi-transparent. Setting the value to 0 makes the element completely disappear. |
Modifiers
Modifiers are vital to creating different visual states for your elements in the UI Editor. They allow you to set up visual state changes and transitions using various properties such as size, position, alpha, etc.
Sounds
Sounds are very similar to Modifiers, but instead of creating visual effects, they create sound effects which can be triggered using Events.
Triggers
Triggers allow you to add interactivity to your QSApp by enabling the ability to trigger modifiers and events when the trigger is activated. You can add triggers for actions like clicking, hovering, and dragging elements.