Effects
Image Gradient
A vertex based gradient effect for UI Images
Overview
Image Gradient applies a horizontal or vertical color gradient to any UI Image. It modifies the mesh on the fly and supports multi key gradients, tint blending, zooming, and offset control. The effect is fully dynamic and updates whenever the gradient or settings change.
Usage
Add Image Gradient component to a UI Image
Customize the gradient
Properties
| Name | Type | Description |
|---|---|---|
gradientEffect | Gradient | Defines the gradient used for the effect, including multiple color and alpha keys |
gradientType | Type | Horizontal or Vertical gradient direction |
effectOffset | float | Shifts the gradient along its axis, allowing sliding or repositioning |
zoom | float | Scales the gradient, zooming in or out of the gradient space |
cachedGraphic | Graphic | Cached reference to the target graphic |
Public Methods
| Name | Parameters | Description |
|---|---|---|
UpdateGradient() | None | Marks the vertex stream dirty so the gradient updates on next rebuild |
SetGradient(newGradient) | Gradient | Assigns a new gradient and refreshes the effect |
SetGradientColors(startColor, endColor) | Color, Color | Quickly assigns a simple two color gradient |
Code Example
using UnityEngine;
using Evo.UI;
public class ImageGradientExample : MonoBehaviour
{
public ImageGradient gradient;
void Start()
{
// Create a simple two color gradient
gradient.SetGradientColors(
new Color(1f, 0.2f, 0.2f), // Red
new Color(1f, 0.8f, 0f) // Orange
);
// Configure gradient direction
gradient.gradientType = ImageGradient.Type.Horizontal;
// Offset the gradient slightly
gradient.effectOffset = 0.15f;
// Zoom in or out of the gradient
gradient.zoom = 1.2f;
// Apply the modified values
gradient.UpdateGradient();
// Example: assigning a full custom gradient
Gradient custom = new Gradient
{
colorKeys = new[]
{
new GradientColorKey(Color.blue, 0f),
new GradientColorKey(Color.cyan, 0.5f),
new GradientColorKey(Color.white, 1f)
},
alphaKeys = new[]
{
new GradientAlphaKey(1f, 0f),
new GradientAlphaKey(1f, 1f)
}
};
gradient.SetGradient(custom);
// Force rebuild after editing values (do not call with SetGradient)
gradient.UpdateGradient();
}
}