Vignette

비네트

Darkening an image’s edges to pull the eye toward the centre — originally a lens artefact where light falls off toward the frame’s corners.

Also known as: Edge darkeningCorner shading

···

html

<div class="photo"><div class="vig"></div></div>

css

.photo{position:relative;width:min(300px,85%);aspect-ratio:16/10;border-radius:14px;overflow:hidden;
  background:linear-gradient(135deg,#ffb648,#ff5c8a 50%,#5b5bf7)}
.vig{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,.75) 100%);
  animation:pulse 4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.15}50%{opacity:1}}

Just layer a radial-gradient over the image that's transparent in the centre and darkens toward the edges. An inset box-shadow with a large blur and spread does a similar job.

Tune the radius and opacity to control strength — push it too far and it stops looking photographic and starts looking like a dark picture frame.

When to use

Use for hero images, portraits, or focusing attention on the backdrop behind a modal.