Gradient shapes: blobs, orbs and spheres that look real

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.

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.

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

.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%);
}

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.

• 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

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 explains the pairing.

Using gradient shapes in a layout

1. 1

   Choose one light source

   Write it down: top left, warm. Every shape, shadow and highlight follows it.

2. 2

   Use three sizes

   One large shape, one medium and one small reads as depth. Five equal blobs read as confetti.

3. 3

   Let shapes leave the frame

   Cropping the largest shape at an edge makes the canvas feel bigger than its borders.

4. 4

   Keep a calm area for words

   Shapes are busy. Put them around the headline, never behind it.

5. 5

   Add grain

   A fine noise layer makes smooth digital shading feel printed and hides banding. See grainy gradients.

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.