Submitted by: Octavia Anghel(octaviaanghel@gmail.com)

Wednesday Jun 27th 2018 by Octavia Anghel

Language: Web, Expertise: Beginner - Learn how to use masking with CSS to improve your page layout.

Masking tells your browser which asset elements should be visible, and is very practical for creating attractive shapes and layouts. Masking can be realized in three ways: using SVG elements, a raster image or using CSS gradients.

The main aspect of SVG is that can be scaled or transformed without losing quality.

img {
  mask-image: url("mask_image.png") linear-gradient(-45deg,
                        rgba(255,0,0,0) 10%, rgba(255,0,0,1) 80%);
  mask-image: url(#masking); /*reference to the element generated and defined in SVG code*/
Mobile Site | Full Site