7 Techniques to Achieve a Vignette Transparent Effect in Photoshop

Step-by-Step Guide: Making a Vignette Transparent Background in CSS

A vignette transparent background subtly fades the edges of an element to transparent so the underlying page or media shows through. This is useful for overlaying images, hero sections, modals, or cards while preserving context beneath. Below are practical, browser-friendly methods with code examples and tips.

When to use a transparent vignette

• Softening image edges over varied backgrounds
• Focusing attention on center content without a hard mask
• Creating layered UI effects (hero banners, overlays, modals)

Method 1 — CSS mask-image (best visual quality, modern browsers)

Use mask-image with radial-gradient to create a smooth circular or oval vignette that fades to transparent.

Code (full-width hero example):

css
Copy CodeCopied
.hero {
width: 100%;
  height: 500px;
  background: url(‘hero.jpg’) center/cover no-repeat;
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);
}

Notes:

• Use -webkit-mask-image for Safari support.
• Adjust the inner radius (40%) and outer stop (100%) to control vignette softness and size.
• For rectangular vignette, switch to conic/linear gradients or tweak ellipse shape.

Method 2 — mask with multiple radial gradients (corner-focused vignette)

Create corner fades by combining gradients:

css
Copy CodeCopied
.card {
  width: 600px;
  height: 400px;
  background: url(‘image.jpg’) center/cover no-repeat;
  -webkit-mask-image:
    radial-gradient(ellipse at top left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%),
    radial-gradient(ellipse at top right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%),
    radial-gradient(ellipse at bottom left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%),
    radial-gradient(ellipse at bottom right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%);
  mask-image:
    radial-gradient(ellipse at top left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%),
    radial-gradient(ellipse at top right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%),
    radial-gradient(ellipse at bottom left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%),
    radial-gradient(ellipse at bottom right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

Notes:

• Composite behavior differs across browsers; test with -webkit-mask-composite as needed.
• Swap color stops to invert (transparent center, opaque edges) for different effects.

Method 3 — pseudo-element overlay with gradient (widest support)

If masks aren’t available, use an absolutely positioned ::before/::after with a transparent gradient overlay.

css
Copy CodeCopied
.container {
  position: relative;
  width: 100%;
  height: 500px;
  background: url(‘hero.jpg’) center/cover no-repeat;
  overflow: hidden;
}

.container::before {
  content: “;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,0.6) 100%);
  mix-blend-mode: multiply;
}

Notes:

• This darkens edges rather than fully making them transparent; combine with backdrop filters or cutouts if you need true transparency.
• For true transparency with a pseudo-element, you can use transparent center to opaque edges and set element behind to show through, but true “cut-out” requires mask or SVG.

Method 4 — SVG mask (precise control, works in older browsers)

Create an SVG mask and apply it via mask-image or inline SVG.

Inline SVG example:

html
Copy CodeCopied
<svg width=“0” height=“0” style=“position:absolute;”>
  <defs>
    <radialGradient id=“vg” cx=“50%” cy=“50%” r=“50%”>
      <stop offset=“40%” stop-color=“white” />
      <stop offset=“100%” stop-color=“black” stop-opacity=“0” />
    </radialGradient>
    <mask id=“vignetteMask”>
      <rect x=“0” y=“0” width=“100%” height=“100%” fill=“url(#vg)”/>
    </mask>
  </defs>
</svg>

<div class=“img” style=“mask:url(#vignetteMask); -webkit-mask:url(#vignetteMask);”>
  <img src=“photo.jpg” alt=“”>
</div>

Notes:

• SVG masks allow non-rectangular, complex shapes and animations.
• Ensure proper sizing and viewBox for predictable results.

Tips for accessibility and performance

• Keep contrast and focus for important foreground text—avoid cutting off legible areas.
• Test across browsers (mask support varies; -webkit- prefixes necessary).
• Prefer CSS masks for GPU-accelerated rendering; avoid huge SVGs or complex filters that hurt performance.
• Use responsive units (%, vw, vh) for consistent behavior across screen sizes.

Quick tuning cheatsheet

• Softer vignette: increase outer stop distance (e.g., 60% → 100%) and use smoother gradients.
• Stronger transparency: set outer color stop to rgba(…,0).
• Oval vs circle: change radial-gradient shape (ellipse vs circle) and center position.
• Corners: use multiple radial-gradients at corners.

If you want, I can generate ready-to-drop HTML/CSS examples for a specific layout (hero, profile card, modal).