Demo: CSS mask

<div class='mask-container'><div class='masked-content'>Hello, World!</div></div>

.mask-container { width: 300px; height: 150px; background-color: lightblue; position: relative; -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%); mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%); -webkit-mask-size: 200px 200px; mask-size: 200px 200px; -webkit-mask-position: center; mask-position: center; }
.masked-content { color: white; font-size: 24px; text-align: center; line-height: 150px; }

// No JavaScript required for this demo