Core Code
Core Code Modern Dev Handbook

Mask Position

Use mask-position to control mask placement.

Preview

Code

<style>
img{
width:200px;
-webkit-mask-image:url("https://via.placeholder.com/150");
mask-image:url("https://via.placeholder.com/150");
mask-position:center;
mask-repeat:no-repeat;
}
</style>

<img src="https://via.placeholder.com/400x250">

More CSS Masking Examples (8)

example Basic Mask Image open example example Gradient Mask open example example Circle Mask open example example Mask Size open example example Mask Repeat open example example Masked Text Effect open example example Mask Hover Reveal open example example Combined Mask Effects open example