
To learn how to create the CSS Cutout Text follow the steps below:
Demo:
Step1.
Add. HTML
<div class="cutout-text">
<div class="text">SEA SIDE</div>
</div>
Step2.
Add CSS
Use the mix-blend-mode property to add the cutout text to the image:
body {font-family: tahoma;
height: 100vh;
}
.cutout-text {
position: relative;
background-image: url("https://lenadesign.org/wp-content/uploads/2021/07/brighton-2-1024x267.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
.text {
background-color: rgba(255,255,255,0.8);
color: #000;
font-size: 10vw;
font-weight: bold;
padding: 10px;
width: 50%;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
mix-blend-mode: screen;
}
Enjoy coding!
Read also:
CSS background-blend-mode Property
How to create a transparent text with stroke in CSS?