# Light leak effect: warm film glows in design

[Canonical HTML page](https://gradiently.design/guide/light-leaks)

Those amber streaks at the edge of an old photograph were a camera fault. Now they are one of the warmest moods in design. Here is how light leaks work, and how to make convincing ones digitally.

## The short version

- A light leak is a warm glow or streak that appears when stray light reaches film through a gap in the camera.
- Real light leaks usually sit at the edge of the frame and run through red, orange and yellow, often fading towards white where the light was strongest.
- A convincing digital light leak can be made with soft radial or linear gradients in warm colours, layered over an image with a screen or lighten blend.
- Light leaks should stay away from text, because a bright patch behind words lowers their contrast.
- In video, a light leak that sweeps across the frame for under a second makes a gentle transition between clips.

The **light leak effect** is the warm orange, red and yellow glow that appears when stray light reaches photographic film, usually through a loose back, a worn seal or a gap while loading. On film it was an accident. In design it has become a mood: nostalgic, sunlit, a little imperfect. You can recreate it with soft gradients in warm colours placed at the edge of the frame and blended over an image, and the details below are what make it look real rather than pasted on.

## What a real light leak looks like

Because light enters through a gap, a leak almost always starts at an edge or a corner and fades inwards. On colour film the glow usually runs from deep red at the faint end through orange to yellow and almost white where it was strongest. It brightens rather than darkens the picture, and it has no hard outline.

- **Position:** an edge or corner, often one side only.
- **Colour:** red to orange to pale yellow, warmest at the outer edge of the glow.
- **Shape:** soft vertical streaks or a diffuse bloom, never a perfect circle in the middle.
- **Behaviour:** it adds light, washing out shadows where it falls.
- **Variation:** no two frames match, which is part of the charm.

## Light leak gradients you can copy

Each of these is a single CSS gradient that fades to transparent, so it can sit on top of a photo or a dark background. On their own they show on a dark ground here; over a photo, blend them as described in the next section.

- Left edge leak: `radial-gradient(ellipse 45% 80% at 0% 50%, #fff3c4 0%, #ffb547 18%, #f0612e 38%, #a3202a 58%, transparent 82%)`
- Corner burn: `radial-gradient(circle at 100% 0%, #fff7d6 0%, #ffc15a 14%, #ff7a3c 30%, #c2283a 48%, transparent 72%)`
- Vertical streak: `linear-gradient(100deg, transparent 0%, transparent 52%, #b3262e 60%, #ff8a3d 68%, #fff0b8 74%, #ff8a3d 80%, #b3262e 88%, transparent 96%)`
- Bottom bloom: `radial-gradient(ellipse 70% 50% at 50% 110%, #ffe0a3 0%, #ff9d4a 22%, #e0473a 42%, #6e1a35 62%, transparent 85%)`

Four classic leak positions. The bright centre sits at or beyond the frame edge, so only the falloff is visible, as with a real leak.

- Hot core: #fff3c4
- Amber: #ffb547
- Tangerine: #f0612e
- Film red: #c2283a
- Wine fade: #6e1a35

A light leak palette, from the brightest point of the glow to where it dies into the image. Keep the order: a leak never goes yellow at the faint end.

## How to add a light leak in CSS

Put the gradient on a layer above the image and blend it with `screen`, which only ever lightens, just like stray light. Lower the opacity until the photo still reads clearly. MDN's [mix-blend-mode reference](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) lists the other modes; `lighten` and `soft-light` are worth trying too.

```css
.photo {
  position: relative;
  isolation: isolate;
}

.photo img {
  display: block;
  width: 100%;
}

.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 45% 80% at 0% 50%,
    #fff3c4 0%, #ffb547 18%, #f0612e 38%, #a3202a 58%, transparent 82%
  );
  mix-blend-mode: screen;
  opacity: 0.75;
  pointer-events: none;
}
```

A left edge leak over any image. The gradient ends in transparent, and screen blending means it can only add warmth and light.

To make it feel more like film, add grain on top of everything and warm the shadows slightly. [Grainy gradients](https://gradiently.design/guide/grainy-gradients) and [gradient overlay css](https://gradiently.design/guide/css-gradient-overlay) cover both layers.

> **Build a small set, not one leak** Make four or five leaks in different positions and strengths, then flip and rotate them as you go. Real film never leaks the same way twice, so repeating one overlay across a carousel or a grid is the fastest way to give the trick away.

Watch the colour order too. Most unconvincing leaks either stay a flat orange from edge to edge or turn pink at the bright end. Keep the hottest point pale and slightly yellow, let it cool through amber into red, and let the red disappear into the image rather than ending on a visible edge.

## Where light leaks work, and where they don't

### Avoid

- A bright leak behind a headline
- The same leak on every image in a set
- A perfect circle of glow in the centre
- Cool blue or green leaks on warm photos
- Leaks so strong the subject disappears

### Do

- Leaks on the edge opposite your words
- Vary position and strength across a series
- Start the glow at or beyond the frame edge
- Red to amber to pale yellow, as film records it
- Enough opacity to feel warm, not washed out

Light leaks suit photographers, film festivals, musicians, summer campaigns, travel and anything nostalgic. They pair naturally with [retro gradient](https://gradiently.design/guide/retro-gradients) palettes and warm, faded photos. They suit precise, technical brands less, because the whole point is imperfection.

A portrait event post for a rooftop cinema with warm film colours glowing from one edge

A warm surface with the glow kept to one side, and the words on the calm side of the frame.

A square music release cover titled Side B with warm, filmic colour

A square release cover where warmth and grain carry the nostalgia, not a busy overlay.

## Light leaks in video and motion

In video, light leaks are often used as transitions: a warm flare sweeps across the frame for half a second or so, peaks to almost white, and reveals the next clip. Keep them short and occasional. One leak between scenes feels like film; one on every cut feels like a filter pack.

For still posts that need warmth without an overlay, a warm living background does the same job more quietly. In Gradiently, a Mark's light and grain render live at every size, and its calmest area moves behind your words by itself, so a sunlit, filmic surface never puts its brightest patch behind a headline. Photos added in the Studio can also take a warm wash in the Mark's colours, so picture and background share the same glow. For the related effect of light around shapes, see [glow effect](https://gradiently.design/guide/glow-effect); for photographers specifically, [photographer branding](https://gradiently.design/guide/photographer-branding).

## FAQ

### What is a light leak effect?

A warm red, orange or yellow glow that appears when stray light reaches film through a gap in the camera. Designers now recreate it digitally for a nostalgic, sunlit mood.

### How do I make a light leak effect?

Place a soft warm gradient that fades to transparent at the edge of an image and blend it with screen or lighten mode, then lower its opacity and add a little grain.

### What colours are light leaks?

Usually deep red at the faint end, through orange and amber, to pale yellow or near white where the light was strongest.

### Can I put text over a light leak?

It is better not to. The bright part of a leak lowers text contrast, so place the leak on the opposite side of the frame from your words.