Fill Types
Each fill layer in the material stack is assigned one fill type. The type can be changed at any time.
Solid Color Fill
A flat uniform color across the entire element. The simplest and most performant fill type.
- •Color (via the color picker)
- •Opacity
Linear Gradient Fill
A smooth color transition along a straight axis.
Color Stops
The gradient bar displays the current gradient. Click anywhere on the bar to add a new color stop. Each stop has:
- •Color — the color at this point in the gradient
- •Position — expressed as a percentage (0% = start, 100% = end)
- •Opacity — the alpha at this stop, independent of the color's alpha
Gradient Controls
- •Gradient Angle: The direction of the gradient in degrees. 0° = left to right. 90° = top to bottom. Animatable.
- •Start and End Points: Set explicit X/Y start and end coordinates relative to the shape's bounding box for gradients that don\'t span the full element.
Gradient Repeat Mode
- •None — gradient transitions once from start to end
- •Repeat — the gradient tiles beyond its start/end points
- •Reflect — the gradient tiles alternately mirrored
Radial Gradient Fill
A smooth color transition radiating outward from a center point.
- •Center Point: X/Y position of the gradient origin within the element's bounding box (expressed as percentages: 50%/50% = center). Animatable.
- •Radius X / Radius Y: The horizontal and vertical extent of the gradient. When equal, the gradient is circular; when different, it is elliptical. Animatable.
- •Color Stops: Same as linear gradient — any number of stops with independent colors and positions.
Angular (Conic) Gradient Fill
A gradient that sweeps around a center point like a color wheel.
- •Center Point: The pivot of the sweep.
- •Start Angle: The angle at which the first color stop begins.
- •Color Stops: Distributed around 360°.
Conic gradients are useful for creating color wheel graphics, pie chart appearances, and radially swept color effects.
Diamond Gradient Fill
An extension of the radial gradient that produces a diamond/square radial pattern rather than a circular one. Useful for geometric, architectural, or stylized graphic treatments.
Texture Fill
Applies a procedurally generated texture as a fill layer.
| Texture | Description |
|---|---|
| Noise | Grayscale or color noise at configurable frequency and scale |
| Grain | Fine photographic film grain |
| Concrete | Rough concrete-like surface |
| Sand | Granular sandy texture |
| Woven | Fabric weave pattern |
| Brushed Metal | Linear metallic texture with directionality |
| Watercolor | Soft organic wash texture |
| Halftone | Regular dot halftone pattern |
Texture Parameters
- •Scale — size of the texture pattern (smaller values = finer texture)
- •Opacity — overall transparency
- •Color Mode — Monochrome, Color-Tinted, or Full Color
- •Seed — randomization seed. Changing the seed produces a different random variation of the same texture type
- •Blend Mode — how the texture layer composites with layers beneath it in the material stack
Texture fills are procedural and do not add to the project's file size like imported image textures would.
Pattern Fill
Applies a repeating geometric pattern.
Pattern Types
Pattern Parameters
- •Size — spacing between pattern elements
- •Stroke Weight (for line patterns) — thickness of lines
- •Dot Radius (for dot patterns) — radius of each dot
- •Foreground Color — color of the pattern elements
- •Background Color — color of the space between elements (can be fully transparent)
- •Rotation — rotates the entire pattern, independent of shape rotation
- •Offset X / Offset Y — shifts the pattern within the shape bounds