Menu
I have a small page with a blurred background image. On top of that, I have divs set up as cards that have their transparent overlay on a background image. I'm trying to set up a text effect using blending modes without taking into account the overlay.
The text effect I want to replicate is at this codepen: https://codepen.io/thebabydino/pen/JNWqLL
Specifically, I want to replicate the example on the left, where the drop shadow is inverted along with the text, and the text is the invert of the image underneath.
In my attempts to do so, I have been unable to get the blend mode effect to ignore the opaque layer and only focus on the image.
The point of the opaque layer is to help the text stand out more, but it seems to be having the opposite effect as it influences the blending, making everything darker.
The text is only orange because it is being constantly inverted due to the darker opaque layer and ignoring the image underneath completely.
This is my attempt so far:
html,
body {
min-height: 100vh;
display: flex;
flex-direction: column;
webkit-font-smoothing: antialiased;
moz-osx-font-smoothing: grayscale;
font-family: 'Squada One', sans-serif !important;
}
body::before {
content: '';
background-image: url("https://images.unsplash.com/photo-1641119554941-1c286b163e1c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1920&q=80");
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
position: fixed;
z-index: -1;
filter: blur(2.5px);
width: 100vw;
height: 100vh;
transform: scale(1.1);
}
.parenttile {
margin: 0 auto;
text-align: center;
display: flex;
align-items: center!important;
}
.link_wrapper2 {
width: auto;
padding: 0px;
}
.boxborder {
border-color: blue;
border-width: 0.3em;
border-style: solid;
border-radius: 15px !important;
}
.front {
position: relative;
z-index: 2 !important;
}
.blend {
text-shadow: 0 2px 2px #fdee00;
-webkit-filter: invert(100%);
filter: invert(100%);
mix-blend-mode: lighten;
}
.test-box:before {
content: ' ';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.20);
z-index: 1;
}
.test-box {
background-image: url("https://images.unsplash.com/photo-1641225635705-139a1a5e3938?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=261&q=80");
background-size: cover;
background-repeat: no-repeat;
height: 150px;
border-radius: 15px !important;
position: relative;
}
header.blending h2 {
color: white;
text-shadow: 0 3px 1px orange;
mix-blend-mode: difference;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Box Test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css" integrity="sha512-IgmDkwzs96t4SrChW29No3NXBIBv8baW490zk5aXvhCD8vuZM3yUSkbyTBcXohkySecyzIrUwiF/qV0cuPcL3Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="columns is-centered desktop front">
<div class="column is-9">
<div class="tile is-ancestor parenttile ml-3 mr-3">
<div class="tile is-4 is-parent">
<div class="tile is-child box test-box boxborder has-text-white has-text-centered" style="overflow:hidden;">
<a href="#">
<div class="link_wrapper2 is-align-items-center is-flex blend front">
<header class="blending">Contrasting Text Example</header>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>How can I use a mixed-blend-mode effect to invert the image underneath while ignoring the overlay I have between the text and the image? If this specific approach is not possible, what is an alternative method that could achieve the same result?
355
asked Dec 07 '25 02:12
The semi transparent overlay will always add shade to entire card. We can have same image in the overlay and fade it there.
html,
body {
min-height: 100vh;
display: flex;
flex-direction: column;
webkit-font-smoothing: antialiased;
moz-osx-font-smoothing: grayscale;
font-family: 'Squada One', sans-serif !important;
}
body::before {
content: '';
background: black background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
position: fixed;
z-index: -1;
filter: blur(2.5px);
width: 100vw;
height: 100vh;
transform: scale(1.1);
}
.parenttile {
margin: 0 auto;
text-align: center;
display: flex;
align-items: center !important;
}
.link_wrapper2 {
width: auto;
padding: 0px;
}
.boxborder {
border-color: blue;
border-width: 0.3em;
border-style: solid;
border-radius: 15px !important;
}
.front {
position: relative;
z-index: 2 !important;
}
.blend {
text-shadow: 0 2px 2px #fdee00;
-webkit-filter: invert(100%);
filter: invert(100%);
mix-blend-mode: lighten;
}
.img1 {
background-image: url("https://images.unsplash.com/photo-1641225635705-139a1a5e3938?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=261&q=80");
}
.img2 {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_cat_bg_02.jpg");
}
.img3 {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_cat_bg_01.jpg");
}
.test-box {
background-size: 101% 101%;
background-repeat: no-repeat;
height: 150px;
border-radius: 15px !important;
position: relative;
}
.test-box::before {
content: ' ';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 15px !important;
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: #faa4;
/*blending #faa4 with background image to make it look fade out*/
background-blend-mode: lighten;
}
/*add image to the pseudo element and then fade it*/
.img1.test-box:before {
background-image: url("https://images.unsplash.com/photo-1641225635705-139a1a5e3938?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=261&q=80");
}
.img2.test-box:before {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_cat_bg_02.jpg");
}
.img3.test-box:before {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_cat_bg_01.jpg");
}
header.blending {
color: white;
text-shadow: 0 3px 1px orange;
mix-blend-mode: difference;
font-size: 5rem;
font-weight: bolder;
filter: saturate(4);
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css" integrity="sha512-IgmDkwzs96t4SrChW29No3NXBIBv8baW490zk5aXvhCD8vuZM3yUSkbyTBcXohkySecyzIrUwiF/qV0cuPcL3Q==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="columns is-centered desktop front">
<div class="column is-4">
<div class="tile is-ancestor parenttile ml-3 mr-3">
<div class="tile is-12 is-parent">
<div class="tile is-child box test-box img1 boxborder has-text-white has-text-centered" style="overflow:hidden;">
<a href="#">
<header class="blending">Contra..</header>
</a>
</div>
</div>
</div>
</div>
<div class="column is-4">
<div class="tile is-ancestor parenttile ml-3 mr-3">
<div class="tile is-12 is-parent">
<div class="tile is-child box test-box img2 boxborder has-text-white has-text-centered" style="overflow:hidden;">
<a href="#">
<header class="blending">Contra..</header>
</a>
</div>
</div>
</div>
</div>
<div class="column is-4">
<div class="tile is-ancestor parenttile ml-3 mr-3">
<div class="tile is-12 is-parent">
<div class="tile is-child box test-box img3 boxborder has-text-white has-text-centered" style="overflow:hidden;">
<a href="#">
<header class="blending">Contra..</header>
</a>
</div>
</div>
</div>
</div>
</div>Another approach is to use background-clip:text:
.img {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img1 {
background-image: url("https://images.unsplash.com/photo-1641225635705-139a1a5e3938?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=261&q=80");
}
.img2 {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_cat_bg_02.jpg");
}
.img3 {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_cat_bg_01.jpg");
}
.img4 {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_cat_bg_03.jpg");
}
.img5 {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_art_bw_bg.jpg");
}
.wrapper {
border: 1px solid;
height: 200px;
width: 400px;
padding: 0;
border-radius: 15px !important;
position: relative;
background-color: #555;
/*blend background image with #444 */
background-blend-mode: screen;
}
.text {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
width: 100%;
margin: 0;
font-size: 80px;
font-weight: bolder;
font-family: cursive;
-webkit-text-fill-color: transparent;
color: transparent;
background-clip: text;
-webkit-background-clip: text;
filter: invert();
}<div class="wrapper img img1">
<div class="text img img1"><span>CONTRAS</span></div>
</div>
<div class="wrapper img img4">
<div class="text img img4"><span>CONTRAS</span></div>
</div>
<div class="wrapper img img5">
<div class="text img img5"><span>CONTRAS</span></div>
</div>
<div class="wrapper img img3">
<div class="text img img3"><span>CONTRAS</span></div>
</div>
<div class="wrapper img img2">
<div class="text img img2"><span>CONTRAS</span></div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
