Two colors, pointed the way you want.

In depth

Angles, pairs and the text on top.

What the angle means

The direction control uses the same convention as the CSS linear-gradient function. The angle names the direction the blend travels toward, measured clockwise from straight up. So 0 degrees runs from the bottom of the shape to the top, 90 degrees runs left to right, 180 degrees runs top to bottom, and 270 degrees runs right to left. Diagonals follow from the same rule: 135 degrees points at the bottom-right corner, so the first stop sits at the top-left, and 45 degrees points at the top-right, so the first stop sits at the bottom-left.

Inside the exported SVG this becomes a linearGradient with x1, y1, x2 and y2 computed from the angle, because SVG describes a gradient by the line it runs along rather than by a rotation. The CSS export writes the same figure back as degrees. The practical effect is that a blob exported at 135 degrees and a CSS background written as linear-gradient(135deg, …) point the same way, so a shape and the section behind it can be kept in step.

Choosing a pair

Two stops close together on the color wheel read as one surface catching light, which is what you usually want behind a headline: the blob looks like a shape rather than like a poster. Two stops far apart read as two colors meeting, which draws attention and works better for an accent that is meant to be noticed, such as a badge or an empty-state illustration.

Keep the two stops close in lightness unless you want a visible band. A pale stop next to a deep one produces a hard edge somewhere in the middle of the shape, and on an irregular outline that edge lands in a different place each time you shuffle. If the pair must span a wide lightness range, lengthen the blend by pointing it along the shape's longest axis, which on most blobs is roughly diagonal.

Saturation matters more than hue at large sizes. A full-bleed background blob wants both stops desaturated, because the shape covers enough of the viewport that a saturated fill sets the mood of the whole page. A 200-pixel accent can take both stops at full strength without overwhelming anything.

Text on top of a gradient

A gradient gives text two backgrounds at once, and the contrast ratio has to hold against the worse of them. Work out the ratio at both stops before shipping, not at the average. Body text needs 4.5 to 1 and large text, meaning about 24 pixels or 18.66 pixels bold, needs 3 to 1.

Two worked examples from the preset pairs. Ink-colored text at 344f5c on the apricot stop eecda3 gives roughly 5.7 to 1, which is comfortable for body copy. White text on the rose stop ef629f gives roughly 3 to 1, which passes for a large headline and fails for a paragraph. The same gradient can therefore be safe under a heading and unsafe under the sentence below it.

When a pair will not hold, there are three fixes that do not mean changing the colors. Move the text off the blob and let the shape sit beside it. Put a flat panel behind the text, with the blob visible around it. Or point the angle so that the readable stop covers the area the text sits over, which is usually 180 degrees with the light stop first.

Taking it into code

The SVG export keeps the gradient as a real linearGradient in defs with an id, so both stops can be changed later in an editor or from script. If several blobs share a page, rename the ids or scope the markup, because gradient ids are global to the document and a duplicate silently wins.

The CSS export gives the shape as a data URI plus a linear-gradient declaration in the same degrees, which suits a decorative background that no script needs to touch. The React export is the same markup as a component with size and color props. The Flutter export paints a LinearGradient whose begin and end alignments are derived from the angle, so a blob drawn on a canvas in an app matches the one on the marketing page it came from.