MOCKSTACKS
EN
Questions And Answers

More Tutorials









CSS Masking

With Clipping and Masking you can make some specified parts of elements transparent or opaque. Both can be applied to any HTML element.

Masks are similar to Clips, but instead of defining a path you define a mask what layers over the element. You can imagine this mask as an image what consist of mainly two colors: black and white.

Luminance Mask: Black means the region is opaque, and white that it's transparent, but there is also a grey area which is semi-transparent, so you are able to make smooth transitions.

Alpha Mask: Only on the transparent areas of the mask the element will be opaque.

This image for example can be used as a luminance mask to make for an element a very smooth transition from
                        right to left and from opaque to transparent

This image for example can be used as a luminance mask to make for an element a very smooth transition from right to left and from opaque to transparent.

The mask property let you specify the the mask type and an image to be used as layer.


Example

mask: url(masks.svg#rectangle) luminance;

An element called rectangle defined in masks.svg will be used as an luminance mask on the element.


Simple mask that fades an image from solid to transparent

div {
 height: 200px;
 width: 200px;
 background: url(http://lorempixel.com/200/200/nature/1);
 mask-image: linear-gradient(to right, white, transparent);
}

In the above example there is an element with an image as its background. The mask that is applied on the image (using CSS) makes it look as though it is fading out from left to right.

The masking is achieved by using a linear-gradient that goes from white (on the left) to transparent (on the right) as the mask. As it is an alpha mask, image becomes transparent where the mask is transparent.

output without mask

output without mask

output with the mask

output with the mask


Using masks to cut a hole in the middle of an image

div {
 width: 200px;
 height: 200px;
 background: url(http://lorempixel.com/200/200/abstract/6);
 mask-image: radial-gradient(circle farthest-side at center, transparent 49%, white 50%);
}

In the above example, a transparent circle is created at the center using radial-gradient and this is then used as a mask to produce the effect of a circle being cut out from the center of an image.

output without mask

output without mask

output with the mask

output with the mask


Using masks to create images with irregular shapes

div { 
 height: 200px;
 width: 400px;
 background-image: url(http://lorempixel.com/400/200/nature/4);
 mask-image: linear-gradient(to top right, transparent 49.5%, white 50.5%), linear-gradient(to top
left, transparent 49.5%, white 50.5%), linear-gradient(white, white);
 mask-size: 75% 25%, 25% 25%, 100% 75%;
 mask-position: bottom left, bottom right, top left;
 mask-repeat: no-repeat;
}

In the above example, three linear-gradient images (which when placed in their appropriate positions would cover 100% x 100% of the container's size) are used as masks to produce a transparent triangular shaped cut at the bottom of the image.

output without mask

output without mask

output with the mask

output with the mask




Conclusion

In this page (written and validated by ) you learned about CSS Masking . What's Next? If you are interested in completing CSS tutorial, your next topic will be learning about: CSS Browser Support.



Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue: mockstacks@gmail.com.


Share On:


Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.