# Gradient orbs: glowing spheres for heroes and covers

[Canonical HTML page](https://gradiently.design/guide/gradient-orb)

One glowing sphere on a dark ground can carry a whole landing page or album cover. It looks effortless, and it is easy to get wrong. These are the recipes and the placement rules.

## The short version

- A gradient orb is a glowing sphere made from a radial gradient, usually a bright core fading through a saturated colour into a dark ground.
- Orbs come in three common styles: a soft glow with no edge, a lit sphere with a crisp edge, and an eclipse ring with a dark centre.
- An orb glows convincingly only on a dark or deeply coloured ground, because glow is contrast with its surroundings.
- Place the orb away from the headline, usually high and to one side, and let the words sit on the calm ground.
- In CSS, an orb is a radial gradient layer or a blurred circular element positioned behind the content.

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](https://gradiently.design/guide/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.

- Violet glow: `radial-gradient(circle at 50% 50%, #faf5ff 0%, #c4b5fd 10%, #7c3aed 26%, #2e1065 50%, #0b0a1a 75%)`
- Cyan glow: `radial-gradient(circle at 50% 50%, #ecfeff 0%, #67e8f9 9%, #0891b2 24%, #083344 48%, #020617 74%)`
- Ember glow: `radial-gradient(circle at 50% 50%, #fff7ed 0%, #fdba74 10%, #f43f5e 28%, #4c0519 52%, #0c0507 76%)`
- Emerald glow: `radial-gradient(circle at 50% 50%, #f0fdf4 0%, #86efac 8%, #059669 22%, #022c22 46%, #010805 72%)`
- Eclipse ring: `radial-gradient(circle at 50% 50%, #0b0a1a 0%, #0b0a1a 24%, #fde68a 25%, #f97316 28%, #7c2d12 38%, #0b0a1a 60%)`
- Iridescent glow: `radial-gradient(circle at 50% 50%, #fdf2f8 0%, #f9a8d4 12%, #a855f7 30%, #3b82f6 46%, #0b1026 70%)`

Six orbs on dark grounds. The iridescent one shifts hue as it fades, pink to violet to blue, which reads as a glossy surface.

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](https://gradiently.design/guide/dark-gradient-backgrounds) has grounds that pair well with every orb above.

- Ink violet ground: #0b0a1a
- Ink navy ground: #020617
- Ink red ground: #0c0507
- Ink green ground: #010805

Four near blacks, each tinted towards one orb. Match the ground to the orb and the glow looks natural.

## 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.

- Website hero 1920×1080: 1920 × 1080
- Instagram post 1080×1350: 1080 × 1350
- Playlist cover 1080×1080: 1080 × 1080
- Story 1080×1920: 1080 × 1920

On a wide hero, put the orb on the side opposite the headline. On tall formats, put it in the top third with the words below.

A square podcast cover with a glowing violet light high in the frame and the show title below on dark ground

A podcast cover at 3000×3000. The light sits above the title, never under it.

A wide product launch banner with the headline on the left and a bright glowing area on the right

A launch hero at 1920×1080, with the words on the left and the brightest area to the right.

## 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.

```css
.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;
}
```

A violet orb top right on an ink ground, with a faint cyan light bleeding in from the bottom left. The content sits above both.

> **Large blurs cost something** A big `filter: blur()` on a moving element can drop frames on older phones. Animate `transform` only, keep the blur radius modest, and read [CSS gradient performance](https://gradiently.design/guide/css-gradient-performance) before shipping.

## 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](https://gradiently.design/guide/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](https://gradiently.design/guide/reduced-motion).

## How to make a gradient orb look original

### Generic orb

- Purple to blue, centred, on black
- Pure white core that clips
- Placed behind the headline
- Perfectly smooth, banding in the fade

### Considered orb

- A brand colour with a hue shift in the falloff
- A tinted core that stays luminous
- Offset, cropped, with words on calm ground
- Fine grain over the fade to keep it smooth

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](https://gradiently.design/guide/grainy-gradients) 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.

## FAQ

### How do I make a gradient orb?

Use a radial gradient with a tinted white core, a saturated colour band and a dark ground, for example `radial-gradient(circle, #faf5ff 0%, #c4b5fd 10%, #7c3aed 26%, #2e1065 50%, #0b0a1a 75%)`.

### What background works best behind a gradient orb?

A near black tinted towards the orb's colour. Glow only reads as glow against a dark surround.

### Can I put text on top of a gradient orb?

Avoid it. The orb is the brightest part of the frame, so text over it loses contrast. Place the orb to one side and keep the words on calm ground.

### How do I make a blurry orb in CSS?

Create a circular element with a radial gradient fading to transparent, then apply `filter: blur()`. Position it absolutely behind the content.