@abloatai/decks returns a Fill object that you place in a layer’s fills array. Fills are composited from bottom to top — so the first entry in the array sits at the back and each subsequent entry layers on top — giving you the same stacking model as Figma. The SDK ships six builders covering the four fill types: 'solid', 'gradient', 'image', and 'shader'.
solidFill
solidFill(color, opacity?) returns a flat, single-color fill. Pass any CSS color string — hex, rgb(), rgba(), or a theme CSS variable — and an optional opacity multiplier between 0 and 1.
linearGradient
linearGradient(stops, opts?) sweeps a gradient along a straight line at angle degrees (default 180, which runs top→bottom). Each stop is a { color, at? } object where at is a 0–1 position along the gradient axis.
{ color: string; at?: number }[]
required
Gradient color stops in order. Omit
at to let the browser distribute stops evenly.number
Angle in degrees.
0 = bottom→top, 90 = left→right, 180 = top→bottom (default), 270 = right→left.number
Overall fill opacity from
0 to 1. Defaults to 1.radialGradient
radialGradient(stops, opts?) radiates outward from a center point. The optional at option is an [x, y] pair in 0–1 canvas coordinates ([0.5, 0.5] is the center).
{ color: string; at?: number }[]
required
Color stops along the radial axis from center to edge.
[number, number]
Center of the gradient as
[x, y] fractions of the fill box. Defaults to the CSS default (centered).number
Overall fill opacity from
0 to 1. Defaults to 1.meshGradient
meshGradient(points, opts?) layers multiple positioned radial blobs to create a soft, organic mesh effect — the kind of blurred color-cloud background common in modern design. Each point is an { color, at, radius? } object where at is an [x, y] position in 0–1 coordinates and radius controls the blob’s spread as a fraction of the fill box (default 0.5).
{ color: string; at: [number, number]; radius?: number }[]
required
Positioned color blobs. Each renders as a radial gradient and all layers are composited together.
string
An optional CSS color placed behind all the blobs as a solid base.
number
Overall fill opacity from
0 to 1. Defaults to 1.meshGradient compiles to stacked radial-gradient CSS layers. It works in every modern
browser without any runtime dependency.imageFill
imageFill(url, opts?) stretches an image over the fill box. Use ablo.images.upload() to get a hosted URL for local files before passing it here.
string
required
A fully-qualified
https:// URL for the image. Must be one of the accepted MIME types:
JPEG, PNG, GIF, WebP, SVG, or AVIF.'cover' | 'contain' | 'fill'
How the image fits its box.
'cover' (default renderer behavior) crops to fill; 'contain' letterboxes; 'fill' stretches without preserving aspect ratio.number
Overall fill opacity from
0 to 1. Defaults to 1.shaderFill
shaderFill(input, opacity?) applies an animated WebGL gradient powered by a named preset. The shader runs in the Ablo renderer and produces smooth, continuously animating backgrounds — no extra dependencies required on your end.
ShaderPreset
required
One of
'aurora', 'ocean', 'sunset', 'ember', 'midnight', 'mint', 'candy', or 'custom'.{ color1: string; color2: string; color3: string }
required
Three CSS color strings that the shader blends together. Exact behavior varies by preset.
number
Animation playback speed. Defaults to
0.2.number
Pattern density / frequency. Defaults to
1.3.boolean
Whether the shader animates. Set to
false for a static snapshot. Defaults to true.number
Overall fill opacity from
0 to 1. Defaults to 1.Using fills on shapes
Thefills field on a shape layer accepts an array of Fill objects. The fills composite bottom-to-top, so you can combine a solid base with a gradient or image overlay in a single layer.