This site runs best with JavaScript enabled.

CSS image masking effect

Kevin Beck

June 15, 2019


Example of image masking effect

Create a simple CSS masking effect to reveal layers (currently this only works in limited browsers).

<div class="image" style="background-image: url('http://kevin-beck.co.uk/assets/edit-2/edit-2__2.jpg');"></div>
<div class="image image--has-mask" style="background-image: url('http://kevin-beck.co.uk/assets/edit-2/edit-2__21.jpg');"></div>
.image {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.image--has-mask {
-webkit-mask-image: radial-gradient(100px at 45% 50%, transparent 100%, black 100%);
-o-mask-image: radial-gradient(100px at 45% 50%, transparent 100%, black 100%);
-moz-mask-image: radial-gradient(100px at 45% 50%, transparent 100%, black 100%);
mask-image: radial-gradient(100px at 45% 50%, transparent 100%, black 100%);
}

Examples