mask-image เป็น CSS property สำหรับใช้สร้างเลเยอร์เพื่อ mask อีลีเมนต์หรือรูปภาพได้ mask-image สามารถใช้รูปภาพอื่นเพื่อทำการ mask ได้ เช่น

1mask-image: image(url(mask.svg));

สำหรับตัวอย่างของเราต้องการสร้าง mask ที่มีรัศมีแบบวงกลมเป็นเลเยอร์ทับรูปภาพจึงเลือกใช้ radial-gradient

1img {
2  mask-image: radial-gradient(
3    circle at center,
4    black 50%,
5    rgba(0, 0, 0, 0.2) 10%
6  );
7}

circle at center เป็นตัวบอกว่าจะให้ gradient เริ่มต้นตรงกลางของภาพ โดยมีการแสดงผลสีดำจากรัศมีที่ 0 - 50% ส่วนรัศมีที่เหลือแสดงผลเป็นสีขาวที่มีความโปร่งใส 0.2 หรือ 20% เมื่อ radial-gradient ถูกใช้เป็น mask จุดไหนที่มีสีดำก็จะทำให้ภาพที่ถูก mask แสดงผลออกมาเต็มที่ ส่วนที่เหลือจะถูกแสดงเป็นพื้นหลังขาวที่มีความโปร่งใสแทน

เพื่อให้ใช้กับ Chrome และ Safari ได้ต้องมีการระบุ prefix เป็น -webkit ด้วยครับ

1img {
2  mask-image: radial-gradient(
3    circle at center,
4    black 50%,
5    rgba(0, 0, 0, 0.2) 10%
6  );
7  -webkit-mask-image: radial-gradient(
8    circle at center,
9    black 50%,
10    rgba(0, 0, 0, 0.2) 10%
11  );
12}