CSS Tricks
CSS Trick

CSS Masks

Control opacity with gradients and shapes for ink fades and soft transitions.

#css #masks #effects #gradients

Browser Support

✓ Chrome 120+ ✓ Firefox 115+ ✓ Safari 15.4+ ✗ Edge

CSS Masks

Use gradients to control element opacity for fade effects.

.fade-bottom {
  mask-image: linear-gradient(to bottom, black 60%, transparent);
}


.spotlight {
  mask-image: radial-gradient(circle, black 40%, transparent 70%);
}

Live Demo

CSS Masks
INTERACTIVE
60%
180deg
CSS Code
.masked-box {
width: 120px;
height: 120px;
background: linear-gradient(135deg, #8b5cf6, #06b6d4);
border-radius: 0.5rem;
-webkit-mask-image: linear-gradient(180deg, black 60%, transparent);
mask-image: linear-gradient(180deg, black 60%, transparent);
}

Black areas of the mask are visible, transparent areas are hidden.

Share this CSS trick

Comments