Gradients

Polotno accepts a CSS linear-gradient() string anywhere a solid color is accepted. That covers both fill and stroke, on figures, lines, SVG elements, images, and text.

Gradient fill

Set fill to a gradient string instead of a color:

element.set({
  fill: 'linear-gradient(90deg, #ff6b6b 0%, #4ecdc4 100%)',
});

Any value the CSS syntax allows works, including multiple color stops and rgba() colors with alpha.

Gradient stroke

The same string works on stroke. A stroke gradient needs a non-zero strokeWidth to be visible:

element.set({
  stroke: 'linear-gradient(45deg, #f7b733 0%, #fc4a1a 100%)',
  strokeWidth: 6,
});

Fill and stroke are independent, so an element can carry a solid fill with a gradient stroke, or two different gradients.

On text

Text supports both, including on curved and stroked text. A gradient applied to a text element is measured against the text's own bounding box, so it stays correct when the element is rotated or the text is set on a curve.

textElement.set({
  fill: 'linear-gradient(180deg, #ffd700 0%, #ff8c00 100%)',
  stroke: 'linear-gradient(180deg, #8b4513 0%, #3e1f08 100%)',
  strokeWidth: 2,
});

Direction

Angular syntax (90deg) and CSS directional keywords (to right, to top left) are both parsed. The editor UI writes angular gradients; keywords are supported mainly so hand-written or imported JSON keeps working.

Export support

Gradient fills and strokes render through every exporter: PDF, SVG, HTML, PPTX, and image export, as well as server-side rendering with polotno-node.

For PDF/X-4 output with colorMode: 'cmyk', gradients are converted through the output profile along with every other fill and stroke. See PDF export.