# Gradient shapes: blobs, orbs and spheres that look real

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

A blob with a gradient on it is easy. A blob that looks like it has weight, sitting in light, is a different thing. The difference is five small decisions about where the light comes from.

## The short version

- Gradient shapes look three dimensional when every shape in the design is shaded from the same imagined light source.
- A convincing sphere has five zones: a highlight, a lit side, a core shadow, a band of reflected light near the edge, and a cast shadow beneath it.
- In CSS, a sphere is a circular element with a radial gradient whose centre is moved towards the light, for example `circle at 30% 30%`.
- Blobs and organic shapes can be made with uneven `border-radius` values and shaded with the same radial gradient as a sphere.
- Shadows should be a darker, cooler version of the shape's own colour rather than grey or black.

**Gradient shapes** are blobs, orbs, spheres and pills filled with a blend that makes them look lit, as if they had volume. They look real when the shading follows one light source: a bright highlight on the side facing the light, a darker core shadow on the far side, a faint rim of reflected light at the very edge, and a soft shadow on the ground. Skip any of those and the shape reads as a flat sticker with a gradient on it. Get them right and two colours are enough to suggest a solid object.

## How light falls on a round shape

Painters have described this for centuries, and it applies to every round shape you draw. Pick a light direction before you pick a colour, then shade each zone in order. Top left is the convention because readers expect it, but any direction works if you stay consistent.

| Zone | Where it sits | Colour |
| --- | --- | --- |
| Highlight | Closest point to the light | Near white, tinted with the light's colour |
| Lit side | The half facing the light | The shape's true colour, at its brightest |
| Core shadow | Where the surface turns away | The darkest band, slightly cooler |
| Reflected light | A thin rim at the shadowed edge | A little lighter than the core shadow |
| Cast shadow | On the surface beneath | Soft, dark, darkest where it touches |

The five zones of a lit sphere. The reflected rim is the one most often missed, and the one that sells the roundness.

## Shading recipes you can copy

These swatches are lighting studies: the shading you would place inside a circle, a cylinder or a cone. Each is lit from the top left. Apply them to a shape with rounded corners and they become solid objects.

- Sphere shading, violet: `radial-gradient(circle at 30% 28%, #f5f3ff 0%, #c4b5fd 10%, #7c3aed 34%, #3b0f8a 62%, #5b21b6 78%)`
- Sphere shading, amber: `radial-gradient(circle at 32% 30%, #fff7ed 0%, #fdba74 12%, #ea580c 38%, #7c2d12 64%, #9a3412 80%)`
- Cylinder shading, teal: `linear-gradient(90deg, #134e4a 0%, #2dd4bf 22%, #ccfbf1 32%, #14b8a6 50%, #0f3d3a 85%, #115e59 100%)`
- Cone shading, indigo: `conic-gradient(from 200deg at 50% 50%, #1e1b4b, #a5b4fc, #eef2ff, #6366f1, #1e1b4b)`

Look for the slight lift at the end of each sphere and cylinder: that is the reflected light at the shadowed edge.

The sphere recipes end on a colour a little lighter than the one before it. That last stop is the reflected rim, placed just inside the edge of the circle so it survives the clipping. Without it, the edge of the shape goes dead and it looks like a hole rather than a ball. The [radial gradient](https://gradiently.design/guide/radial-gradient) guide explains how the centre position and size change the falloff.

## How to make a gradient sphere in CSS

Make the element a circle with `border-radius: 50%`, then move the gradient's centre towards the light. The circle clips the gradient, so the highlight sits off centre inside a perfectly round shape. A blurred, squashed ellipse underneath gives the cast shadow.

```css
.sphere {
  width: 240px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%,
    #f5f3ff 0%, #c4b5fd 10%, #7c3aed 34%, #3b0f8a 62%, #5b21b6 78%);
  position: relative;
}

.sphere::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -14%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(30, 10, 70, 0.45) 0%, rgba(30, 10, 70, 0) 70%);
  filter: blur(6px);
  z-index: -1;
}

.blob {
  width: 280px;
  aspect-ratio: 1;
  border-radius: 62% 38% 46% 54% / 55% 42% 58% 45%;
  background: radial-gradient(circle at 32% 30%,
    #fff7ed 0%, #fdba74 12%, #ea580c 38%, #7c2d12 64%, #9a3412 80%);
}
```

A violet sphere with a soft cast shadow, and an amber blob made from eight uneven border radius values.

> **Blobs that breathe** Animate the eight `border-radius` values between two sets over 8 to 12 seconds with an ease in and out. The shape wobbles slowly while its lighting stays put, which keeps it believable. Respect [reduced motion](https://gradiently.design/guide/reduced-motion) settings.

## Blobs, pills and organic shapes

Blobs read as friendly and soft, which is why they are popular for wellness, food, children's and creative brands. They follow the same lighting rules as a sphere, but their bulges catch highlights in more than one place. Keep one main highlight and let the others be faint. More on the style itself is in [organic shapes in design](https://gradiently.design/guide/organic-shapes-design).

- **Pill:** a rounded rectangle shaded like a cylinder, light running along its length.
- **Pebble:** a squashed sphere, highlight broad and low in contrast, like matte stone.
- **Droplet:** a sphere with a bright, sharp highlight and a strong reflected rim, reading as glossy.
- **Cloud blob:** overlapping circles with one shared highlight, so they read as one form.

## Why gradient shapes look flat, and how to fix it

### Looks flat

- Highlight dead centre, as if lit from the viewer
- Each shape lit from a different side
- Grey or black shadows
- Hard edge between light and dark
- No cast shadow, so shapes float

### Looks solid

- Highlight pushed towards one light source
- Every shape shares the same light
- Shadows that are a deeper, cooler shade of the colour
- A long, gradual turn into the core shadow
- A soft shadow anchors each shape to a surface

Colour temperature does a lot of the work. Warm light gives cool shadows and cool light gives warm ones. A violet sphere under a slightly pink highlight with a blue violet core shadow feels far more real than one that simply goes from light violet to dark violet. [Warm and cool colours](https://gradiently.design/guide/warm-and-cool-colors) explains the pairing.

## Using gradient shapes in a layout

1. **Choose one light source** Write it down: top left, warm. Every shape, shadow and highlight follows it.
2. **Use three sizes** One large shape, one medium and one small reads as depth. Five equal blobs read as confetti.
3. **Let shapes leave the frame** Cropping the largest shape at an edge makes the canvas feel bigger than its borders.
4. **Keep a calm area for words** Shapes are busy. Put them around the headline, never behind it.
5. **Add grain** A fine noise layer makes smooth digital shading feel printed and hides banding. See [grainy gradients](https://gradiently.design/guide/grainy-gradients).

A portrait product post announcing new ice cream flavours with soft rounded gradient forms around the headline

A product post at 1080×1350. Rounded, lit forms around the words, with the headline on calm ground.

If you would rather not shade shapes by hand, Gradiently's Marks are living backgrounds built from stacked materials, light and grain, and they render cleanly at every size you design in. For a single glowing sphere used as a hero image, see [gradient orbs](https://gradiently.design/guide/gradient-orb).

## FAQ

### How do I make a gradient shape look 3D?

Shade it from one light source: a highlight on the lit side, a darker core shadow on the far side, a slightly lighter rim at the shadowed edge and a soft cast shadow beneath.

### How do you make a sphere with a CSS gradient?

Give an element `border-radius: 50%` and a `radial-gradient(circle at 30% 30%, ...)` that runs from near white to the main colour to a dark shade. Moving the centre towards the light puts the highlight off centre.

### How do I make a blob shape in CSS?

Use eight uneven `border-radius` values, such as `62% 38% 46% 54% / 55% 42% 58% 45%`, and fill it with a radial gradient.

### What colour should the shadow on a gradient shape be?

A darker, slightly cooler version of the shape's own colour. Grey or black shadows make coloured shapes look dirty.