Color, gradients & swatches
Gradients
A gradient is a smooth blend between colors, and in Popcorn Editor any Fill or Stroke can be one. You build and tune it in the color picker, then shape it directly on the canvas with draggable handles.
From solid to gradient
Select an object and click its Fill (or Stroke) swatch in the Properties panel to open the color picker. At the top of the picker is a Solid / Gradient switch. Choose Gradient — the button reads Convert to gradient — and the flat color becomes a two-stop blend you can edit. To go back, switch to Solid, labeled Use solid color.
Everything that accepts a solid color accepts a gradient: shapes, text, the group frame, and an image backdrop all work the same way.
The five gradient types
Once you're in gradient mode, a type selector lets you pick the shape of the blend:
| Type | What it does | Reach for it when |
|---|---|---|
| Linear | Colors blend along a straight line | Backgrounds, banners, simple sky-to-ground fades |
| Radial | Colors blend outward from a center point | Spotlights, glows, soft vignettes |
| Conic | Colors sweep around a center like a clock | Color wheels, pie-style accents, metallic sheens |
| Mesh | A grid of color points blends in two directions | Rich, painterly backgrounds with several colors |
| Freeform | Free-placed color points blend organically | Loose, natural blobs of color with no fixed grid |
Linear and radial cover most everyday work. Conic, mesh and freeform are there when you want something richer or more artistic.
Color stops
The colors in a gradient are its Stops. The picker shows a stops bar with a dot for each one; click a dot to recolor that stop, and drag it to change its Position along the blend.
- Add stop — insert a new color between two existing ones.
- Delete stop — remove the selected stop (a gradient always keeps at least two).
- Reverse — flip the whole color order end to end.
- Distribute evenly — space every stop equally, undoing any manual positioning.
Each stop carries its own color and its own opacity, so you can fade a gradient to fully transparent at one end — handy for soft overlays.
Angle and geometry
Linear and conic gradients expose an Angle field so you can set the direction (or the sweep start) by number. Radial gradients use a Radius. You rarely have to type these in, though — it's almost always faster to shape the gradient right on the object.
Edit on canvas
Click Edit on canvas and an overlay of handles appears directly over the object. What you see depends on the type:
- Linear — a Start and an End handle. Drag them to set direction and length.
- Radial — a center handle plus a Radius ring. Drag the center to move the glow, the ring to resize it.
- Conic — a center handle and an angle handle for the sweep.
- Mesh and Freeform — the color points themselves appear as draggable dots; move them to push color around the object.
The overlay carries a small toolbar. It labels the current type, and for Mesh it adds Add row and Add column to grow the grid; for Freeform it offers Add point and Delete stop. Each handle doubles as a color swatch — click one to recolor that stop without leaving the canvas. Click Done to close the overlay when you're happy.
Gradient styles and presets
Building a good blend from scratch takes a moment, so the picker includes a Gradient styles panel of ready-made presets:
Soft Light, Modern Brand, Glass, Metallic, Warm Sunset, Subtle Depth, and Print Safe.
Click any preset to apply it to the current object, then tweak the stops or geometry to taste.
Made a blend you'll want again? Save gradient stores it under Saved in the same panel, ready to reuse across the design. Until you save your first one, that section shows No saved gradients.
Tip: Print Safe keeps its colors inside the CMYK gamut, so what you design is close to what the press produces. Reach for it first when you're working on a print job.
Gradients and print export
Gradients look great on screen and print well, but it helps to know how they leave the app. When you Download a print PDF or an SVG, every object with a gradient fill or stroke is rendered to a high-resolution image (at least 300 PPI) rather than written as native vector shading. This applies to all five gradient types, not just mesh and freeform, and it keeps the blend looking exactly as designed — the print export runs entirely in your browser.
The practical upshots:
- A gradient object doesn't stay editable text or a live vector path in the exported file.
- Because it rasterizes, a gradient can't sit on a spot-color separation. Use a solid ink for die lines, varnish and other spot work.
- Keep gradient objects at their final size so the 300 PPI render stays crisp.
The Preflight checks in the Export dialog will note any objects that rasterize on the way out, so there are no surprises on the proof.
Where to go next
Gradients build on the same picker as every other color, so the Fill, stroke & background color page is a good companion. If this is a print job, run through the Preflight checks before you export.