Vignette on dark backgrounds: when it helps and when it hurts

The vignette slider is one of two effects in the generator (the other is grain). It is also the one most often turned up too high. This page explains what the slider actually does, when adding vignette helps a dark layout, and the small set of cases where the right value is zero.

What a vignette actually does

A vignette is a smooth radial darkening from the centre of the image to its edges. In photographic optics, lenses produce mild vignetting naturally — light falls off toward the corners because the path through the glass is longer. In digital design we add it deliberately, for a different reason: to push the eye toward the centre and create depth.

In CSS terms, a vignette is just a radial gradient layered on top of the base background, transparent in the middle and dark at the edges:

.with-vignette {
  background:
    radial-gradient(ellipse at center,
      transparent 50%,
      rgba(0,0,0,0.5) 100%),
    #0a0a0a;
}

The generator implements the same idea: the slider controls the alpha of the dark stop at the corners, with the centre kept transparent. Slider values around 30% correspond roughly to a corner alpha of 0.3.

What it does well

Three jobs vignette is genuinely good at:

Pulling attention to a centred subject. A logo, hero image or single headline parked in the middle of the screen reads stronger with a 20–35% vignette behind it. The eye treats the brighter centre as "the picture" and the darker edges as frame.
Hiding the visible seam where a hero meets the rest of the page. A horizontal hero ending in flat near-black often shows a soft band where it meets the body of the page. A vignette darkens the bottom corners enough that the transition disappears.
Suggesting depth in a flat layout. Without ornament, dark UIs can look like cardboard. A small amount of vignette implies that the surface is curved or that there is a light source overhead.

What it does badly

Three failure modes worth recognising:

Hiding navigation in the corners. Top-right menus and bottom-left chat bubbles often live exactly where the vignette is darkest. If a control sits in a corner, either move it inboard or skip the vignette.
Cheapening photographic content. A real photograph already has its own subtle natural vignette. Stacking a CSS vignette on top reads as a filter, in the worst sense.
Competing with strong patterns. Both a heavy bokeh background and a strong vignette pull attention to the centre; together they fight rather than reinforce. The pattern guide covers which patterns can take a vignette layer.

How strong, exactly

The slider goes from 0 to 100. In practice, useful values cluster low:

0–10%: imperceptible. Use this when you want the depth effect without anyone noticing it. Default for body-text surfaces.
15–25%: subtle. Reads as "this surface has a sense of weight". Default for marketing landing pages and product showcases.
30–45%: visible. Reads as deliberate framing. Default for a single hero photo or a single big headline with no surrounding UI.
50–70%: heavy. Use only when the whole point of the asset is "spotlight" — concert poster, single-subject portrait, dramatic title card.
75%+: almost never the right value. The corners are nearly black; you have built a portal effect, not a backdrop.

The "frame check". Step back from the screen. If you can still see the vignette as a vignette — as a darker ring around the image — it is too strong for a backdrop. Drop it 10–15% until it merges into the perception of "depth" rather than "I have applied a vignette".

Vignette plus pattern

Patterns interact with vignette in three ways:

Stars / dots / grid: the pattern survives the vignette intact in the centre and disappears in the corners. This is usually flattering — the centre reads as the subject and the corners as out-of-focus space.
Noise / grain: grain at the corners sometimes amplifies banding because the corners now contain very low values. If you see ugly steps in the dark corners, drop vignette by 5–10% or add a touch more grain.
Bokeh: the second-most centripetal effect. Bokeh + vignette doubles down on "look at the middle" and is rarely needed; pick one.
Carbon fibre / stripes: these patterns have hard edges that fight the soft falloff of the vignette. Pick one or the other; do not stack them.

Vignette plus gradient

If the base background is itself a gradient, vignette stacks fine — but the visual effect changes. A top-to-bottom gradient already darkens the bottom of the image; adding a centred vignette darkens the bottom corners more than the top corners. The result reads as light coming from the upper-left, which is realistic and usually flattering. If you want symmetric darkening instead, switch the base to a radial gradient (see CSS gradients) and keep the vignette modest.

Vignette and accessibility

Vignette darkens the corners by reducing local contrast. If text or interactive elements live in the corners, that contrast loss can push them below the WCAG minimum of 4.5:1. Two practical responses:

Keep text and controls within the central 60% of the box, where the vignette barely affects contrast.
If you must put text in a corner, drop vignette to 0–10% and use a near-black flat surface instead. The web design page covers contrast ratios in more detail.

A worked example

You are building a landing page hero. The plan is a centred wordmark, a single-line tagline below it, and one CTA button.

Base colour: near-black #0a0a0a from pure vs near-black.
Pattern: low-density stars or "none" — the wordmark is the subject, not the texture. The pattern guide applies.
Vignette: 25%. Strong enough that the corners read as frame, light enough that the CTA still pops if it sits below centre.
Grain: 10% to forestall banding from the vignette in the dark corners.
Export: 1920×1080 at 1× per the export resolution guide.

Common mistakes

Vignette over 50% on a UI page. The corners are now darker than the rest of the dark theme; navigation disappears.
Vignette stacked on a real photograph. The photo already has its own optical vignette; the second one reads as a filter.
Strong pattern + strong vignette. Pick one as the lead; let the other sit near zero.
Banding in the vignette's dark ring. Add a small amount of grain rather than dropping the vignette.
Vignette behind body text. Reduces contrast in the corners; for reading surfaces, keep vignette at 0–10%.

Quick checklist

Is the subject of the image actually centred? Vignette is wasted on off-centre compositions.
Are corners free of text and controls?
Does the corner darkening introduce visible bands? If yes, add a touch of grain.
Is the vignette strength below the level at which it reads as a filter?
If using a pattern, is the combined visual weight (pattern density + vignette) still under control?

What to do next

Open the generator, set vignette to 0, choose your colour and pattern, then bring vignette up slowly. Stop at the lowest value that gives the depth you want. For body-text surfaces, prefer the cleanup approach in pure vs near-black. For corner banding, see grain and banding. If the asset is going onto a real product, read about black backgrounds in web design.

Last reviewed on 28 April 2026.

← Back to generator