Gradients
Create smooth color transitions using linear, radial, or angular gradients.
Gradient types
Gradients are available as a fill type for frames, shapes, vectors, and text. Lovision supports three gradient types:
- Linear — colors blend along a straight line from one point to another.
- Radial — colors blend outward from a center point in a circle.
- Angular — colors blend around a center point, like a cone viewed from above.
How to create a gradient fill
- Select a layer.
- Open the Fill section in the right inspector.
- Click + to add a fill, then click the color swatch.
- In the color picker, click the fill type menu (the square icon) and choose Linear, Radial, or Angular.
- The gradient editor appears with two color stops by default. Click a stop to change its color. Drag stops along the gradient bar to move them.
- Click anywhere on the gradient bar to add a new stop.
- Select a stop and press Delete / Backspace to remove it.
Adjusting direction and position
For linear gradients, drag the handle endpoints on the canvas to change direction and length. For radial gradients, drag the center handle to move the focal point and the edge handle to change the radius.
Tips
- Keep text readable when placing it over a gradient — use a high-contrast color at the text end.
- Add a stop with the same color at both ends to create a fade-in or fade-out from transparent.
- Gradient stops support individual opacity, letting you blend from an opaque color to transparent within the same fill.
- Use solid fills for most UI elements and reserve gradients for backgrounds, illustrations, or decorative elements.