Transparent gradients in CSS: fades, overlays and scrims

To make a CSS gradient transparent, give one of its stops a colour with zero alpha: linear-gradient(to bottom, #7c3aed, transparent) fades violet to nothing, letting whatever sits underneath show through. Use the same idea for fades at the end of text, dark scrims behind captions and coloured overlays on photos. For fading an element's content rather than its background, use mask-image with a gradient instead.

Ways to write a transparent colour

Why fades used to turn grey

The keyword transparent is black with zero alpha. Early browsers blended the red, green and blue channels and the alpha channel separately, so a fade from white to transparent passed through half transparent grey on the way. That is why older tutorials insist on rgba(255, 255, 255, 0) instead.

The specification now requires premultiplied alpha: each colour is weighted by its opacity before blending, so a fully transparent stop contributes no colour at all. Every current browser does this. Writing the matching colour at zero alpha is still a harmless habit, and it keeps you safe in email clients and old WebViews.

Where the fade ends matters as much as its colours. A stop at 70 percent finishes the fade early and leaves the rest of the box fully clear, which is ideal for a tint that should only touch one edge. Two stops at the same position make a hard cut from colour to nothing, useful for half filled bars and split backgrounds. Stop positions are explained in CSS linear gradients.

Fading content with mask-image

A background gradient sits behind the content, so it cannot fade text, images or a scrolling list. A mask can. With mask-image, opaque parts of the gradient keep the element visible and transparent parts hide it. The colour of the mask doesn't matter, only its alpha.

/* Fade the last lines of a teaser paragraph */
.teaser {
  max-height: 9rem;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
}

/* Soft edges on a horizontally scrolling row */
.carousel {
  overflow-x: auto;
  mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

/* Fade a photo into the page on any background colour */
.hero-photo {
  mask-image: linear-gradient(to bottom, #000 50%, transparent 95%);
}

The old alternative was a white gradient laid over the content. It breaks the moment the page is not white, in dark mode for instance, and it blocks clicks unless you remember pointer-events: none. A mask has neither problem.

Scrims: transparent gradients for text

A scrim darkens part of an image so text on it reads, fading to fully transparent so the rest of the photo stays bright. A two stop fade works, but its straight ramp leaves a visible line where the darkening ends. More stops, spaced to ease out, hide that edge.

.card {
  background-image:
    linear-gradient(to top,
      rgb(2 6 23 / 0.8) 0%, rgb(2 6 23 / 0.62) 15%, rgb(2 6 23 / 0.42) 30%,
      rgb(2 6 23 / 0.24) 48%, rgb(2 6 23 / 0.1) 66%, rgb(2 6 23 / 0.03) 82%,
      rgb(2 6 23 / 0) 100%),
    url("/images/coast.jpg");
  background-size: cover;
  color: #f8fafc;
}

Tint the scrim with a deep version of the photo's colour rather than pure black and it will feel part of the picture. On a warm sunset photo, a deep brown such as rgb(41 20 8 / 0.75) sinks into the image, where black would look like a filter laid on top. Gradient overlays in CSS covers colour washes and blend modes, and text over images covers placement.

Transparent holes and spotlights

Flip the idea: transparent in the middle, dark outside. A radial gradient laid over a page or image leaves one area lit and quietly dims everything else, which suits onboarding tips, product close ups and slides.

.spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--x, 50%) var(--y, 40%),
    transparent 0 140px,
    rgb(2 6 23 / 0.72) 220px
  );
}

For social posts and print, you rarely need to hand build scrims. In Gradiently the Mark itself makes room for your words, deepening or lifting the colours near the letters, with no overlay layer to tune for each size.