CSS Mask Generator

Create CSS mask effects with visual editor

Mask Type

Linear Gradient

Angle0°

Stops

Mask Properties

Size

Position

Repeat

Presets

Live Preview

Masked Content

Generated CSS

.masked-element {
  mask: linear-gradient(0deg, transparent, black);
-webkit-mask: linear-gradient(0deg, transparent, black);
  mask-size: 100%;
  mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
}