Masky - CSS Gradient Mask GeneratorSkip to main content

Masky

CSS Gradient Mask Generator

Presets

Gradient Type

Linear Radial

Angle

°

Radial Position

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

Color Stops

Mask Size

Cover Contain 100% 50% Custom

Custom width Enter a CSS width value like 12.5rem or 50%

Custom height Enter a CSS height value like 9.375rem or 75%

Mask Position

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

Element Type

Image Text Square

Background

Transparent Color Fill

Background color

Sample preview image with gradient mask applied

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 Enter a URL to an image to use for the preview

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%);