Gradient orbs: glowing spheres for heroes and covers

A gradient orb is a glowing sphere made with a radial gradient: a bright core, a band of saturated colour, and a long fade into a dark ground. It has become a favourite for product launch pages, app heroes, podcast art and album covers because one shape gives a design a focal point, depth and a sense of energy without a single photo. The recipe is short. What separates a striking orb from a blurry blob is the ground behind it, the colour of its core and where you put it.

Three kinds of gradient orb

• Soft glow orb: no edge at all, just light blooming out of the dark. Calm, atmospheric, good behind large layouts.
• Lit sphere: a crisp round edge with a highlight on one side, reading as a planet or a glass ball. Bold and graphic. The lighting rules are in gradient shapes.
• Eclipse ring: a dark disc with light spilling round its rim. Dramatic, nocturnal, popular for music and tech.

Gradient orb recipes

Each recipe is a single radial-gradient() you can paste into CSS or a design tool. The first stop is the core, the middle stops are the coloured body, and the last stop is the ground. Pushing the ground stop further out makes the glow wider.

Avoid a pure white core. A white tinted with the orb's own colour, such as #faf5ff in a violet orb, keeps the centre luminous without looking blown out. Avoid a pure black ground too: a near black with a trace of the orb's hue makes the glow feel like it belongs in the space.

Why orbs need a dark ground

Glow is contrast. On a white page, the same violet orb looks like a bruise; on a deep ink ground, it looks like light. If your brand lives on light backgrounds, use a pale pastel orb with a soft, wide falloff and accept that it will read as a bloom of colour rather than a glow. Dark gradient backgrounds has grounds that pair well with every orb above.

Where to place a gradient orb

An orb is the brightest thing in the frame, so it pulls the eye before anything else. That is a gift if your headline sits next to it and a problem if the headline sits on top of it. Put the orb high and to one side, crop it at the edge if it is large, and keep the words on calm, dark ground. Never use an orb as a glow behind text: it lowers contrast exactly where you need it most.

A gradient orb hero in CSS

The simplest method is a radial gradient layer on the section itself. For a softer, more organic glow, use a separate circular element with a strong blur, which also lets you animate it slowly without repainting the whole section.

.hero {
  position: relative;
  min-height: 80vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 30%, #faf5ff 0%, #c4b5fd 6%, #7c3aed 16%, #2e1065 34%, transparent 55%),
    #0b0a1a;
  color: #f5f3ff;
}

/* Optional: a soft second light, blurred */
.hero::before {
  content: "";
  position: absolute;
  width: 40vmax;
  aspect-ratio: 1;
  left: -12vmax;
  bottom: -18vmax;
  border-radius: 50%;
  background: radial-gradient(circle, #0891b2 0%, transparent 65%);
  filter: blur(40px);
  opacity: 0.55;
  pointer-events: none;
}

.hero > * {
  position: relative;
}

Animating a gradient orb

An orb that drifts a few percent across the frame, or breathes slightly larger and smaller, feels alive without distracting from the words. Keep the cycle long, somewhere between 10 and 20 seconds, and ease in and out so the movement never seems to start or stop. On social formats, export it as a short loop whose last frame matches its first: seamless loop video explains how. On the web, move the blurred element with transform and switch the motion off for visitors who ask for reduced motion.

How to make a gradient orb look original

The orb is now common enough that a default one looks like a template. A second, fainter light, a hue shift in the falloff or a layer of grain all move it towards something recognisable. Gradiently's Marks go further: each is a living background with its own light, materials and motion, checked so no two look alike, and it renders at every size you design in. Browse dark Marks in the Market and design with any unclaimed one for free.