Creating a Gradient Layer
- Click Add Layer in the Layers Panel.
- Select Gradient Layer.
- A new gradient layer will appear on your canvas.
Gradient Properties
These properties are found in the Gradient tab of the Inspector Panel.Gradient Type
- Axial (Linear): A straight-line transition between colors.
- Radial: A circular transition radiating from a center point.
- Conic: A 360-degree “color wheel” sweep around a center point.
Colors Stops
You can add as many colors as you want to your gradient.- Find the Colors section in the Gradient tab.
- Click + Add Color to add a new stop.
- Click the color indicator of a stop to change its color and transparency.
- Click the X next to a stop to remove it.
Start and End Points
These define the direction and spread of the gradient.- Points are defined as percentages (0% to 100%) of the layer’s size.
- Start (0%, 0%) and End (100%, 100%) creates a diagonal gradient from top-left to bottom-right.
- For Radial gradients, the distance between the points determines the size of the circle.
Common Properties
Gradient layers support all standard properties in the Geometry and Compositing tabs.Geometry
- Position (X, Y): Location on the canvas.
- Bounds (W, H): The size of the gradient.
- Rotation: Rotate the entire layer to change the gradient’s angle.
Compositing
- Opacity: Adjust the overall transparency of the gradient.
- Corner Radius: Round the corners of the gradient.
Troubleshooting
”My gradient isn’t showing”
Check:- Do you have at least two colors in the Colors section?
- Is the Opacity of the layer or the color stops set to 0%?
- Is the layer hidden?
”The colors look banded”
Solution:- Try adding more color stops with intermediate shades for a smoother transition.
Next Steps
Basic Layers
Mix gradients with solid shapes
Image Layers
Overlay gradients on top of photos
Creating Animations
Animate gradient colors and points
State Transitions
Transition between different gradients