I’m trying to build a glass-style pill component with text inside it.
What I want:
the text uses mix-blend-mode exculsion
the pill has a semi-transparent background
the pill applies a backdrop-filter: blur()
later this pill will expand into a dropdown on hover (similar to the header on httpster.net)
The problem:
as soon as I add backdrop-filter: blur(...) to the pill container, the mix-blend-mode on the text stops blending with the real background behind it.
Instead, the text only blends with the pill itself.
My question is:
Do I have to split the pill into multiple visual layers (for example one layer for the blur, and another one on top for the text with blend mode) in order to achieve this effect?
Or is there a way to make mix-blend-mode work correctly with backdrop-filter in the same element, without separating them?
Thanks!
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background-image: url("https://images.unsplash.com/photo-1763661582858-f88094b11c63?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100vh;
}
.pill {
display: flex;
justify-content: space-between;
--extra-height: 0rem;
height: calc(3rem + var(--extra-height));
box-shadow:
0 4px 6px rgba(0, 0, 0, 0.08),
0 12px 24px rgba(0, 0, 0, 0.06),
0 24px 48px rgba(0, 0, 0, 0.04);
border-radius: 2.4rem;
background: rgba(61, 61, 61, 0.12);
backdrop-filter: blur(10px) saturate(180%);
margin: 1rem;
padding: 0 1.4rem;
position: fixed;
left: 1rem;
right: 1rem;
top: 1rem;
z-index: 999;
transition: height .45s cubic-bezier(.55, .085, .68, .53);
align-items: center;
color: #fff;
}
<div class="pill">
<span>Hi ! Hero some text </span>
</div>
