Blobs
SavedOpen generator

gradient · color

Eight gradient blob color pairs

Eight two-stop gradients with hex values and a suggested angle, how the angle maps to CSS degrees, and how to check contrast before putting text on top.

Published September 18, 2026

A gradient blob is two decisions: which two colors, and which way the blend runs. The second decision is the one people skip, and it changes the shape’s character more than most color swaps do.

How the angle works

The direction control uses the CSS convention. The angle names the direction the blend travels toward, measured clockwise from straight up.

Angle The blend runs
0 bottom to top
45 bottom-left to top-right
90 left to right
135 top-left to bottom-right
180 top to bottom
270 right to left

So a blob exported at 135 degrees and a section background written as linear-gradient(135deg, #eecda3, #ef629f) point the same way, and the shape sits in the panel instead of arguing with it.

.section {
  background: linear-gradient(135deg, #eecda3, #ef629f);
}

In the exported SVG the angle becomes a linearGradient with x1, y1, x2 and y2 already resolved, because SVG describes a gradient by the line it runs along rather than by a rotation:

<defs>
  <linearGradient id="blob-fill" x1="0%" y1="0%" x2="100%" y2="100%">
    <stop offset="0%" stop-color="#eecda3" />
    <stop offset="100%" stop-color="#ef629f" />
  </linearGradient>
</defs>

Two rules of thumb. Vertical blends, meaning 180 degrees, read as depth: the shape looks lit from above and sits still. Horizontal and diagonal blends read as movement, because the eye follows the color across the shape in the direction it is already reading. Use 180 behind a headline and 90 or 135 when the blob is meant to lead somewhere.

The angle travels in the URL as ga, alongside the two stops in g.

Eight pairs

1. Apricot to rose — #eecda3 to #ef629f

Warm, soft at one end and saturated at the other. It is the pair to reach for on a marketing hero where the page is otherwise white. At 135 degrees the pale stop lands top-left, which is where most headlines start.

Open at 135 degrees · presets Peach Drift, Sunset Halo, Blush Fade

2. Violet to rose — #7c5cff to #ef629f

Both stops are saturated and close in lightness, so the blend is smooth and the shape holds together at large sizes. Strong enough to carry a dark section without a photograph. Try 135 degrees.

Open at 135 degrees · presets Violet Bloom, Orchid Wash, Twilight Pool

3. Lime to sky — #c2e59c to #64b3f4

Light across its whole range, which makes it the easiest pair here to put dark text on. Good behind a pricing table or a documentation hero where legibility beats drama. 135 degrees.

Open at 135 degrees

4. Teal to mist — #4ca1af to #c4e0e5

Cool, quiet and low contrast. Suits product and technical pages where the shape should register as texture rather than as an illustration. Vertical at 180 degrees, light stop at the bottom, reads like haze.

Open at 180 degrees

5. Ember to plum — #e96443 to #904e95

The most dramatic pair in the set, and the one that most needs a dark background to sit on. At 45 degrees it rises to the right, which suits an accent behind a single large number or a short claim.

Open at 45 degrees

6. Sky to deep blue — #1e8fe5 to #0668b6

One hue, two lightnesses. This is the pair for interface work: buttons, badges, empty-state art, anything that has to look like part of the product rather than part of the campaign. 180 degrees.

Open at 180 degrees

7. Cyan to blue — #01b1cf to #1e8fe5

Neighbors on the wheel, so the blend is almost invisible as a transition and the shape simply looks dimensional. At 90 degrees it works as a band leading across a section divider.

Open at 90 degrees

8. Amber to rose — #f59e0b to #ef629f

Hot at both ends and best used small: a sticker, a badge, an avatar ring, a notification blob. At 90 degrees the two stops stay distinct even at 64 pixels, which is the point.

Open at 90 degrees

Text over a gradient

A gradient hands your text two backgrounds at once, and the contrast ratio has to hold against the worse of them. Check both stops, never the average. The thresholds are 4.5 to 1 for body text and 3 to 1 for large text, which means roughly 24 pixels, or 18.66 pixels at bold weight.

Three worked examples from the pairs above:

  • Ink text at #344f5c on the apricot stop #eecda3 is about 5.7 to 1. Comfortable for paragraphs.
  • White text on the rose stop #ef629f is about 3.0 to 1. It passes for a large headline and fails for the sentence underneath it.
  • White text on the deep blue stop #0668b6 is about 5.7 to 1, but on the light stop #1e8fe5 of the same pair it is about 3.4 to 1. The same gradient is therefore safe at one end of the blob and not at the other.

That last case is the one to watch, because an irregular outline moves the boundary every time you shuffle the seed. When a pair will not hold across its whole range, there are three fixes that do not involve changing the colors:

  1. Move the text off the blob and let the shape sit beside or behind it with a margin.
  2. Put a flat panel under the text, with the blob visible around the panel’s edges.
  3. Point the angle so the readable stop covers the area the text occupies, usually 180 degrees with the safe stop first.

Picking your own pair

Two stops close together on the color wheel read as one surface catching light. Two stops far apart read as two colors meeting, which is louder and better suited to something small that is meant to be noticed.

Keep the stops close in lightness unless you want a visible band: a pale stop next to a deep one puts a hard edge somewhere in the middle of the shape, and on a blob that edge lands somewhere different each time you reshuffle. If the pair has to span a wide lightness range, lengthen the blend by pointing it along the shape’s longest axis, which on most blobs is roughly diagonal.

Finally, scale down the saturation as the shape scales up. A full-bleed background blob sets the mood of the whole page, so both stops want to be muted. A 200-pixel accent can take both at full strength.