Presets

Mask Type

Mask Image

Mask Properties

Multiple Masks

Options

Save/Load

Preview

The image above demonstrates the mask effect

Generated CSS

.masked-element {
  -webkit-mask-image: linear-gradient(to right, transparent, black);
  mask-image: linear-gradient(to right, transparent, black);
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-origin: border-box;
  mask-origin: border-box;
  -webkit-mask-clip: border-box;
  mask-clip: border-box;
}

HTML Structure

<div class="masked-element">
  <img src="your-image.jpg" alt="Masked content">
</div>

Mask Reference

Mask Mode

  • alpha - Uses alpha channel for masking
  • luminance - Uses luminance values for masking
  • match-source - Detects from source

Mask Composite

  • add - Combine mask layers
  • subtract - Subtract upper from lower
  • intersect - Keep overlapping areas
  • exclude - Remove overlapping areas

Tips

  • Use black for visible, transparent for hidden
  • Luminance mode uses brightness levels
  • Combine multiple masks for complex effects
  • Vendor prefix (-webkit-) still needed

Browser Support

  • Chrome: Full (with -webkit-)
  • Firefox: Full
  • Safari: Full (with -webkit-)
  • Edge: Full (with -webkit-)

Rate this tool