Tool Categories

Mask Properties
Create image and shape masking effects
Live Preview & CSS
See your mask effect in action
Masked Content
.masked-element {
  mask: linear-gradient(to right, transparent 0%, black 50%, transparent 100%);
  -webkit-mask: linear-gradient(to right, transparent 0%, black 50%, transparent 100%);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-position: center;
  -webkit-mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}
linear-gradient(to right, transparent 0%, black 50%, transparent 100%)

Black areas in mask are visible, transparent areas are hidden. Include -webkit-mask for better browser support. Use gradients for smooth fade effects.