Vignetting effect on a website: darkening the edges

Vignetting pushes the edges of the image into shadow and leaves the center in the light. The eye goes where it is bright: without realizing it, the visitor comes back to the middle of the screen, to the title, the filmed gesture, the dish. It is the most discreet of the textures, and one of the most useful, because it gains contrast without touching the video.

Without

Vignetting

Where the effect comes from

In photography, vignetting is first an optical accident. Canon describes it as a drop in illumination at the periphery: depending on the lens and the shooting conditions, the four corners of the image come out darker. Part of the light entering the lens is blocked by its barrel, or by the lens hood.

Manufacturers work to erase it. On its recent EOS bodies, Canon corrects peripheral illumination in the camera itself, and the correction is on by default. Yet the same manufacturer points out that vignetting can be a deliberate choice, notably in portraits, to draw the eye toward the subject; it is then added during development, on the computer.

That second use is what the studio’s layer takes up: an intended shadow, laid over the page, that frames the content the way a print frames its subject.

When to use it

Vignetting serves pages that have a subject in the center and a lot of material around it:

• a workshop filmed up close, where the workbench, the shavings and the tools crowd into the corners;
• a place of production, a farm, an estate, a roastery, whose setting spills beyond the frame;
• a property shown large, where the eye must settle on the room;
• a gym or a pitch filmed in harsh light, where blown-out edges distract.

Four of the studio’s twenty-four layouts apply it by default. The Craft workshop layout and the Producer layout pair it with film grain: grain works the surface, vignetting the light. The Sports club layout and the Real estate layout carry it alone.

When to skip it. A light, airy page, made of flat colors and lots of white, has nothing to frame: the layer would only wash out its corners. Avoid it too when important information sits in a corner, a phone number at the bottom of the screen for example: that is precisely where it weighs.

The right dose

Vignetting is set by a single value: the share of the page’s background color mixed into the image at the end of the gradient, 55% by default. The gradient stays transparent over the whole central half, then thickens toward the outside.

Two details make it softer than it looks. Its center sits a little above the middle of the screen, at 42% of the height: the bottom darkens more than the top, as under light falling from above. And the ellipse extends well beyond the screen, so that even the corners only get a light shadow. You notice it mostly when you remove it.

Like all textures, it leaves the first screen alone: the welcome video stays bare, and the layer rises as you scroll down.

One rule holds for all textures: two layers at most. Vignetting makes a good second layer, since it touches the light when the others touch the texture. At the third, the image gets dirty.

What it costs

Almost nothing. The layer is a gradient, drawn once by the browser, with no file to download. It sits in a fixed position over the page and lets clicks and scrolling through.

It never animates. The only thing that varies, during the first scroll, is its opacity. And opacity and transforms are the two properties a browser can vary without repainting the screen (web.dev). Movement comes from the film beneath.

Accessibility

• Contrast. On a dark page, vignetting helps: it darkens the background behind light text placed near the edges. Accessibility rules require a contrast of at least 4.5 to 1 between body text and its background (WCAG 2.2, criterion 1.4.3). Measure it at the least favorable spot on the page, never at the center alone.
• Reduced motion. When a visitor asks their system for less animation (prefers-reduced-motion), grain and frost disappear from the page. Vignetting stays, because it is still.
• No flashing. The layer never changes on its own: only the visitor’s scrolling brings it in, and it then stays in place.

How it is made

A radial gradient, radial-gradient(), in an ellipse: transparent at the center, then mixed with the page’s background color through the color-mix() function. The layer therefore draws the edges toward the site’s background. On a dark palette, they darken; on a light palette, they pale. Vignetting thus stays within the page’s colors.

.m.m--vignette {
  opacity: var(--m-voile, 1);
  background: radial-gradient(130% 110% at 50% 42%,
    transparent 50%,
    color-mix(in srgb, var(--bg) calc(var(--vignette, 55) * 1%), transparent) 100%);
}

--m-voile is zero on the first screen and rises to one as you scroll down; --vignette carries the intensity. The .m prefix ensures the rule only applies to the layer meant for it: placed elsewhere, it has no effect.

In the studio

Vignetting is one of the library’s ten textures. You choose it at the “The texture” step, after the background, alone or with a second texture.