Mask Properties
Create image and shape masking effects

Gradient Settings

Mask Properties

Live Preview & CSS
See your mask effect in action

Live Preview

Masked Content

Generated CSS

.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;
}
Mask Tips:

• Black areas in mask are visible, transparent areas are hidden

• Include -webkit-mask for better browser support

• Use gradients for smooth fade effects

• SVG images work great as mask sources