Opacity, Blending Modes, and Visual Layering

These properties control transparency, how layers of color interact, and visual compositing — essential tools for glassmorphism, overlays, and creative design effects.

1. opacity

The opacity property makes an entire element and all its children transparent. Range: 0 (invisible) to 1 (fully opaque).

.faded   { opacity: 0.5; }   /* 50% transparent */
.hidden  { opacity: 0; }     /* Invisible — still takes up space */
.visible { opacity: 1; }     /* Fully opaque (default) */

opacity vs rgba() — Critical Difference

/* opacity: affects the element AND all its children (text, images, etc.) */
.card {
  background: #6c63ff;
  opacity: 0.4;          /* The entire card — including text — becomes 40% */
}

/* rgba()/hsla() on background: ONLY the background is transparent */
.card {
  background: rgba(108, 99, 255, 0.4);  /* Only background fades */
  color: white;                          /* Text stays fully opaque */
}

[!IMPORTANT] Never use opacity on a container when you want a transparent background but solid text. Use rgba() or hsla() on the background property instead.

opacity and Stacking Contexts

opacity < 1 creates a new stacking context, which can cause z-index surprises:

.parent { opacity: 0.99; }  /* Accidentally creates a stacking context! */
/* Children's z-index is now scoped to this parent */

2. visibility vs display: none vs opacity: 0

Property	Visible	Takes Space	Clickable	Animatable
display: none	❌	❌	❌	❌
visibility: hidden	❌	✅	❌	❌
opacity: 0	❌	✅	✅	✅

Transition pattern — fade in/out with pointer-events:

.tooltip {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.tooltip.is-visible {
  opacity: 1;
  pointer-events: auto;
}

3. mix-blend-mode

Controls how an element's content and background blend with the content behind it. Same as Photoshop blend modes.

img { mix-blend-mode: multiply; }

Mode	Effect	Use Case
multiply	Darkens — white disappears	Logos on colored backgrounds
screen	Lightens — black disappears	Light overlays, glows
overlay	Enhances contrast	Texture overlays
soft-light	Subtle contrast boost	Photo enhancements
hard-light	Strong contrast	Dramatic overlays
difference	Inverts colors	Artistic effects
exclusion	Softer difference	Artistic effects
luminosity	Uses brightness only	Duotone effects
color	Uses hue/saturation, keeps brightness	Colorizing black & white
darken	Keeps darkest color	Shadow merging
lighten	Keeps lightest color	Highlight merging

Practical Example: White Logo on Any Background

/* White logo disappears on white backgrounds, shows on dark */
.logo-white {
  mix-blend-mode: difference;   /* Inverts against whatever is behind it */
}

/* Logo that just darkens whatever is below it */
.logo { mix-blend-mode: multiply; }

4. background-blend-mode

Controls how multiple backgrounds (or a background image + background color) blend with each other — all within the same element.

/* Duotone effect: tint a photo with two colors */
.duotone {
  background-image: url('/img/photo.jpg');
  background-color: var(--color-primary);
  background-blend-mode: multiply;
}

/* Texture overlay: blend a noise texture over a solid color */
.textured {
  background-image: url('/img/noise.png'), linear-gradient(135deg, #6c63ff, #f5a623);
  background-blend-mode: overlay, normal;
}

/* Multiple images blended together */
.layered {
  background-image: url('/img/top.png'), url('/img/bottom.jpg');
  background-blend-mode: screen, normal;
}

5. backdrop-filter — The Glassmorphism Property

Applies filter effects to the area behind the element (through it), rather than to the element itself:

.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);  /* Safari prefix */
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
}

Available backdrop-filter functions:

backdrop-filter:
  blur(10px)
  brightness(1.2)
  contrast(1.1)
  grayscale(0.5)
  saturate(2)
  sepia(0.3)
  drop-shadow(0 4px 12px rgba(0,0,0,0.3))
  hue-rotate(45deg)
  invert(0.1);

[!NOTE] backdrop-filter requires the background of the glass element to be partially transparent (via rgba() or hsla()). A fully opaque background blocks the effect.

6. Glassmorphism Complete Pattern

The most popular CSS trend from the AI vibe-coding era:

.glass {
  /* Semi-transparent surface */
  background: rgba(255, 255, 255, 0.08);

  /* The blur — the defining feature */
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);

  /* Subtle border for depth */
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}