CSS Gradient Mask Layers

Here, we use a linear gradient mask layer for our image. This linear gradient goes from top (black) to bottom (transparent):

Use a linear gradient as a mask layer:.mask1 {

Here, we use a linear gradient along with text masking as the mask layer for our image: Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore. Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.

Use a linear gradient along with text masking as a mask layer:.mask1 {

Here, we use a radial gradient (shaped as a circle) as the mask layer for our image:

Use a radial gradient as a mask layer (a circle):.mask2 {

Here, we use a radial gradient (shaped as an ellipse) as the mask layer for our image:

Use a radial gradient as a mask layer (an ellipse):.mask3 {

Here, we use a conic gradient as the mask layer for our image:

Use a radial gradient as a mask layer (an ellipse):.mask3 {

The following table lists all the CSS masking properties:

Sets the starting position of a mask layer image (relative to the mask position area)