Masks & Gradient Borders

Use the new v4 mask utilities to fade edges, and the padding-box plus gradient trick for gradient borders.

5 min read Level 3/5 #tailwind#effects

What you'll learn

Use mask-* utilities to fade element edges
Build a gradient border with a layered background
Combine the technique with rounded corners

Two effects that used to require hand-written CSS are now idiomatic in v4: edge masks and gradient borders.

Mask Utilities

v4 ships a mask-* family that fades an element out toward an edge using a gradient mask:

<img class="mask-b-from-0% mask-b-to-80%" src="/photo.jpg" />

This fades the bottom edge of the image into the background — no overlay div, no separate gradient layer. There are directional variants (mask-t-*, mask-l-*, mask-r-*) and radial mask utilities too.

Gradient Borders

CSS has no native gradient border, so the trick is a gradient background with a thin padding that an inner solid box covers — leaving only the padding showing as the “border”:

<div class="bg-linear-to-r from-pink-500 to-violet-500 p-px rounded-xl">
  <div class="bg-white dark:bg-gray-900 rounded-[11px] p-6">
    Content sits on a solid surface; the 1px gradient frame shows around it.
  </div>
</div>

Matching the Corners

The inner radius must be slightly smaller than the outer one or the gradient frame will look uneven at the corners. Here the wrapper is rounded-xl (12px) and the inner box is rounded-[11px] — outer radius minus the 1px padding. Scale both together if you change the border thickness.

Background Position & Attachment →