Product photo backgrounds that flatter the product

The best product photo background is one that makes the product look better without being noticed itself. Start with lightness: a dark product needs a lighter ground, and a light product a darker one, so the silhouette reads at thumbnail size. Then choose a colour relationship, tonal for calm or complementary for energy, add a soft contact shadow so the product sits on the surface, and repeat the same setup across every product in the range.

This guide covers each of those decisions, with colour examples, gradient codes for cut-outs and a checklist for catalogue consistency. For broader colour thinking, see complementary colours and the 60-30-10 rule.

Choosing a background colour for a product

Lightness contrast comes first, because it is what makes a shape readable. Colour comes second, and it sets the mood. There are three reliable colour strategies, each with a different effect.

Gradients behind cut-out products

Studio photographers shoot on a sweep: a curved backdrop that runs from wall to floor with no visible corner, lit so it is lighter behind the product and falls off towards the edges. A gentle gradient behind a cut-out recreates that look without a studio. It focuses attention on the product and adds depth a flat colour can't.

Keep the light behind the product, slightly above its centre, as a real light would fall. Keep the range gentle: the product should be the highest-contrast thing in the frame, not the background's glow.

Shadows that ground the product

A cut-out without a shadow floats. Two shadows fix it. A contact shadow is a small, dark, soft line right where the product touches the surface. A cast shadow is a larger, lighter, softer shape falling away from the light. Most products need both, and both should follow the same light direction as the highlights on the product itself.

.product-stage {
  position: relative;
  aspect-ratio: 1;
  background: radial-gradient(ellipse at 50% 40%, #f6efe6 0%, #e9dccb 55%, #cdb89d 100%);
  display: grid;
  place-items: center;
}

/* Soft contact shadow under the product. */
.product-stage::after {
  content: "";
  position: absolute;
  left: 30%;
  right: 30%;
  bottom: 17%;
  height: 5%;
  background: radial-gradient(closest-side, rgb(40 28 16 / 0.35), transparent);
  filter: blur(6px);
}

.product-stage img {
  position: relative;
  z-index: 1;
  width: 62%;
  margin-bottom: 8%;
}

Keeping product photos consistent across a catalogue

A catalogue is read as a grid. When every product sits on the same background, at the same angle and scale, the grid looks calm and people compare products rather than photos. When each image is different, the page looks like a marketplace of strangers.

1. 1

   Fix the background

   One colour or gradient for the main images, written down with its exact codes.

2. 2

   Fix the light

   One direction and softness, so shadows and highlights match across every product.

3. 3

   Fix the angle

   The same camera height and angle for similar products: front, three-quarter, top-down.

4. 4

   Fix the framing

   The product fills the same share of the frame, with the same margin, centred on the same line.

5. 5

   Fix the sizes

   Export every image at the same size for each channel, such as 2048 by 2048 for a Shopify product image.

Shopify product 2048×2048

2048 × 2048

Etsy listing 2700×2025

2700 × 2025

Instagram post 1080×1350

1080 × 1350

Pinterest pin 1000×1500

1000 × 1500

In Gradiently, you can place a cut-out photo over any Mark, tint photos in the Mark's colours, and copy a finished design to other sizes, so a campaign image, a pin and a story share one background. For a product with a strong colour, Match a picture can find Marks whose palette sits close to it.