Fills and effects
Gradients, images, patterns, shaders, shadows, blurs and halftones.
Because everything is drawn on the GPU, fills and effects that are usually "export only" are live on the canvas — and they work on vectors, text and images alike.
Fills
A layer can carry any number of fills, stacked, each with its own blend mode and opacity.
Description
A launch post with its frame selected. The fill swatch in the Design panel opens the fill picker; Gradient turns the solid background into a linear gradient, whose stops show in the picker.
- Select the layer and click its fill swatch in the Design panel.
- Pick a fill type at the top of the picker: Gradient here.
- Drag the stops, or click one to change its colour.
The fill picker has two tabs: Custom for the fill itself, and Libraries for this file's color styles and color variables and those of every library the file uses. A library color is bound: when the library updates, the fill follows.
| Fill | Notes |
|---|---|
| Solid | A color |
| Gradient | Linear, radial, angular and diamond, with as many stops as you like |
| Image | Fill, fit, crop or tile — upload your own, pick a stock photo, or reuse one from your media library |
| Video | A video plays in the fill |
| Pattern | A repeating tile, from the stock set or one you make |
| Shader | A live WGSL shader — Mesh gradient, Plasma, Waves, Starfield, Grid glow |
Strokes
Strokes go inside, centre or outside, and take the same paint types as fills. Dashes, caps and joins are all here, and a line or arrow can pick its endpoints — arrowheads, circles, bars, at either end.
Behind fill sets the paint order: the stroke painted behind the fill, so the fill covers its inner half (SVG's
paint-order: stroke). It is on by default for text (see outlined text) and off
for every other layer.
Trim draws only part of the stroke on a vector, rectangle, ellipse, polygon or star. Start and End say where the visible part begins and ends, as a percentage of the outline. Offset turns that part around the outline, and 360° is one full turn. On a vector with several paths, choose whether each path is trimmed on its own or all of them as one line, one after another. The fill is never trimmed. Key Start, End or Offset in Animate to draw a line on, or to send a dash around a ring.
Effects
| Effect | What it does |
|---|---|
| Drop shadow | Behind the layer |
| Inner shadow | Inside its edges |
| Layer blur | Blurs the layer |
| Background blur | Blurs whatever is behind it — frosted glass |
| Progressive blur | A blur that ramps across the layer |
| Motion blur | Smears the layer along one direction (Length and Angle); on a group, everything inside |
| Noise | Film grain, monochrome or color |
| Texture | An overlaid surface |
| Glass | Refraction, for glassy panels |
| Halftone | Ben Day dots, live and resolution-free |
Description
A launch post with its badge selected. In the Design panel, the + of Effects lists the effects, and Drop shadow adds one, which shows under the badge at once.
- Select the layer.
- Click + by Effects in the Design panel and pick Drop shadow.
- Click the effect's row to change its kind, offset, blur and colour.
A drop shadow's X and Y move it, B (blur) softens it and S (spread) grows it — the layer's own shape
made bigger by that many pixels, with round corners, before the blur (a negative spread shrinks it). Turn off Show
behind transparent areas to cut the shadow away wherever the layer is, so it never shows through a translucent fill.
Shadows work the same on text and on shapes, follow the layer's opacity, and grow with it when you scale it. On text
the shadow is cast by the letters and their outline together. SVG export writes spread as feMorphology; CSS
text-shadow has no spread, so web export draws a spread text shadow from a ring of copies.
Effects stack, and the order matters — drag to reorder them.
Halftone
Halftone deserves its own note because it's what makes PopCraft's comic work look printed rather than filtered. It's a real halftone: dot shape, angle, frequency and ink, computed on the GPU. It stays crisp at any zoom, and it exports to SVG as vector dots rather than a flattened image.
Blend modes
Every layer has one, and so does every individual fill and stroke — including on vectors, which is not a given in design tools. Multiply an inked line over a flat color and you get the result a printer would give you.
Masks
Use the top layer as a mask with Mod+Alt+M. Three kinds:
- Alpha — the mask's transparency decides what shows
- Vector — its outline decides
- Luminance — its brightness decides, so a gradient fades the layer out
Image adjustments
Select an image and the inspector offers non-destructive adjustments, all on the GPU:
- Color — brightness, contrast, exposure, saturation, vibrance, hue, temperature and tint, curves
- Filters — blur, sharpen, noise, pixelate, edge detect, monochrome, invert, posterize, vignette
- Warp — bulge, pinch, swirl
Nothing is baked in: the original pixels stay, and you can save a stack of adjustments as a preset.