<div>
<div>
<div class="image">
<img src="data:image/webp;base64,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" alt="Brian Treese" />
</div>
<h1>
CSS mask-image
</h1>
<strong>
With Brian Treese
</strong>
</div>
</div>
img {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' id='Layer_1' x='0' y='0' style='enable-background:new 0 0 458.6 498.1' version='1.1' viewBox='0 0 458.6 498.1'%3E%3Cswitch%3E%3Cg%3E%3Cpath d='m407.8 410.8-127.7 73.7c-31.4 18.2-70.2 18.2-101.6 0L50.8 410.8C19.4 392.6 0 359.1 0 322.8V175.4c0-36.3 19.4-69.9 50.8-88l127.7-73.7c31.4-18.2 70.2-18.2 101.6 0l127.7 73.7c31.4 18.2 50.8 51.7 50.8 88v147.4c0 36.3-19.3 69.8-50.8 88z' style='fill:%23010101'/%3E%3C/g%3E%3C/switch%3E%3C/svg%3E");
mask-repeat: no-repeat;
mask-position: center;
}
html {
color: white;
font-family: arial, sans-serif;
height: 100%;
}
body {
height: 100%;
margin: 0;
}
body > div {
height: 100%;
background-color: #26004d;
background-image:
radial-gradient(at 87% 88%, hsla(62, 94%, 50%, 1) 0, hsla(62, 94%, 50%, 0) 50%),
radial-gradient(at 28% 4%, hsla(118, 95%, 61%, 1) 0, hsla(118, 95%, 61%, 0) 50%),
radial-gradient(at 50% 6%, hsla(59, 89%, 56%, 1) 0, hsla(59, 89%, 56%, 0) 50%),
radial-gradient(at 23% 61%, hsla(25, 93%, 67%, 1) 0, hsla(25, 93%, 67%, 0) 50%),
radial-gradient(at 34% 23%, hsla(157, 89%, 54%, 1) 0, hsla(157, 89%, 54%, 0) 50%),
radial-gradient(at 95% 78%, hsla(46, 86%, 57%, 1) 0, hsla(46, 86%, 57%, 0) 50%),
radial-gradient(at 71% 7%, hsla(187, 88%, 56%, 1) 0, hsla(187, 88%, 56%, 0) 50%);
display: grid;
place-items: center;
}
.image {
filter: drop-shadow(0 0.25em 1.5em rgba(255, 0, 0, 0.5));
}
h1 {
margin: 0.875em 0 0.25em;
text-align: center;
}
strong {
display: block;
font-size: 1.25em;
font-weight: normal;
text-align: center;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.