Masky - CSS Gradient Mask Generator

Masky

Gradient Type

Linear Radial

Angle

°

Radial Position

Top Left Top Top Right Left Center Right Bottom Left Bottom Bottom Right

Color Stops

0% 0%

100% 100%

Mask Size

Cover Contain 100% 50% Custom

Mask Position

Top Left Top Top Right Left Center Right Bottom Left Bottom Bottom Right

Element Type

Image Text Square

Background

Transparent Color Fill

Sample Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Sample Image URL:

Generated CSS

mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);