tailwind make text in blurred sticky div readable when background color changes

Question

Using tailwindcss, I have a navbar component that is sticky at the top of the page, and uses backdrop-blur to blur the content that scrolls underneath it:

That's with this configuration:

<div className="bg-slate-100">
  <header className="sticky top-0 left-0 z-[1100] w-full backdrop-blur">
    <div className="mx-auto">
      <div className="py-4 px-8 mx-4">
        <nav>
          <a href="/">
            <div>My Site</div>
          </a>
          <ul className="flex justify-between ml-auto">
            <li>Products</li>
            <li>
              <a
                className="bg-emerald-700 hover:bg-emerald-600 text-white py-2 px-4 rounded-sm shadow-lg shadow-emerald-800"
                href="/"
              >
                About
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
</div>

The problem I have is, it works great when the underlying content is light; however, when it's dark, the black text in the navbar become unreadable:

I've been fiddling for hours with various combinations of mix-blend on both the header component itself and the lowest level descendants (e.g., the "My Site" div) to no avail.

There's a pretty similar question here, but it was asked and answered with JavaScript (in fact, there are several others in that same category). But this seems like something that should be doable without JS.

I've made some progress by following this answer, which clarifies that you need to set the mix-blend-mode on the parent element (the header in this case), and then change the color in the lowest level descendent.

This almost works. If I set it to mix-blend-difference bg-black on the header, and explicitly set the text to text-white, it is serviceable on the dark backgrounds:

I would prefer if the text were white, instead of the yellow, which I guess happens from differencing against the slate lowest z-index background color, but could live with this. However, there are two remaining problems: when over a light background, the green around the button becomes pink:

and the blur effect stops working:

This last state is available for fiddling in a Codesandbox demo.

How can I get the text to go to a contrasting color based on the underlying colors, while simultaneously keeping the button colors the whole time, and keeping the blur effect?

Answer 1

You can make the header background only semi-transparent, to have better contrast:

<script src="https://cdn.tailwindcss.com"></script>

<header class="sticky top-0 left-0 z-[1100] w-full backdrop-blur bg-white/50    ">
  <div className="mx-auto">
    <div class="py-4 px-8 mx-4">
      <nav>
        <a href="/">
          <div>My Site</div>
        </a>
        <ul class="flex justify-between ml-auto">
          <li>Products</li>
          <li>About</li>
        </ul>
      </nav>
    </div>
  </div>
</header>
 <div>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet orci lorem. Vivamus ac elementum magna, a efficitur ipsum. Aenean quis ante sagittis nisl elementum egestas nec ut nibh. Duis sed quam leo. Pellentesque non interdum neque. Suspendisse faucibus neque magna, a pharetra est pellentesque quis. Donec cursus pulvinar leo, sed feugiat augue condimentum luctus. Nam mi sapien, egestas sit amet leo vel, pretium fermentum augue. Praesent vitae pretium neque. In nisl neque, suscipit sit amet libero ut, congue ullamcorper urna. Cras vitae nibh neque.

In sollicitudin fermentum rutrum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ut feugiat arcu. Donec finibus venenatis ex, eu tincidunt purus rhoncus vel. Fusce ut rhoncus augue. Sed eu velit eget sem fermentum gravida luctus commodo lorem. Curabitur faucibus, justo ut suscipit sollicitudin, tellus ligula accumsan nibh, id commodo ex mi sit amet quam. Nullam sem mauris, gravida vitae vestibulum ac, accumsan sit amet enim. Aenean hendrerit, nulla nec eleifend lobortis, augue elit finibus leo, eget volutpat quam mauris sed ex. Fusce interdum imperdiet neque, non commodo orci mollis quis. Nunc id nunc eu metus dapibus posuere sed vel neque. Nullam in risus mauris. Phasellus vel maximus mi. Suspendisse sodales rutrum congue.

Nam feugiat bibendum est, quis interdum est feugiat quis. Nulla facilisi. Curabitur diam urna, posuere quis nibh ultrices, pretium accumsan nibh. Etiam sagittis ex nibh, id faucibus metus varius dignissim. Nulla vel tempus nisi, in consequat est. Sed venenatis egestas urna, non molestie justo laoreet vitae. Mauris eu lacinia velit.

Praesent laoreet eleifend quam vitae ornare. Morbi nibh lacus, pretium ut elit sit amet, consectetur pretium felis. Phasellus non arcu sed odio semper vulputate. Nunc interdum consequat mi nec dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut vulputate est, non vulputate urna. Ut est dolor, consequat ac convallis id, congue id nibh. Suspendisse ornare tellus egestas convallis rutrum. Integer convallis sit amet turpis sit amet suscipit. Nam at ligula mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; In vestibulum eget justo vitae tincidunt. Aliquam egestas turpis nunc, at laoreet enim consectetur id. Nulla posuere eros sit amet ultrices sodales. Aliquam erat volutpat. Vivamus eget odio leo.

Sed eleifend ut mauris in tristique. Integer condimentum vestibulum lectus et laoreet. Aenean convallis lacinia sem, in venenatis turpis facilisis quis. Nulla nec sagittis enim. Aenean consequat tincidunt fringilla. Donec urna purus, laoreet vel lobortis vel, pretium eget risus. Ut eleifend tincidunt massa pellentesque cursus. Sed tempor placerat metus, quis lobortis risus. Sed blandit enim feugiat congue maximus. Pellentesque ac facilisis nisl. Nullam vel odio in turpis rhoncus ultricies eget nec velit. Praesent sit amet tincidunt ligula. Donec mollis et metus quis vestibulum.
 </div>
 <div class="bg-black text-white">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet orci lorem. Vivamus ac elementum magna, a efficitur ipsum. Aenean quis ante sagittis nisl elementum egestas nec ut nibh. Duis sed quam leo. Pellentesque non interdum neque. Suspendisse faucibus neque magna, a pharetra est pellentesque quis. Donec cursus pulvinar leo, sed feugiat augue condimentum luctus. Nam mi sapien, egestas sit amet leo vel, pretium fermentum augue. Praesent vitae pretium neque. In nisl neque, suscipit sit amet libero ut, congue ullamcorper urna. Cras vitae nibh neque.

In sollicitudin fermentum rutrum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ut feugiat arcu. Donec finibus venenatis ex, eu tincidunt purus rhoncus vel. Fusce ut rhoncus augue. Sed eu velit eget sem fermentum gravida luctus commodo lorem. Curabitur faucibus, justo ut suscipit sollicitudin, tellus ligula accumsan nibh, id commodo ex mi sit amet quam. Nullam sem mauris, gravida vitae vestibulum ac, accumsan sit amet enim. Aenean hendrerit, nulla nec eleifend lobortis, augue elit finibus leo, eget volutpat quam mauris sed ex. Fusce interdum imperdiet neque, non commodo orci mollis quis. Nunc id nunc eu metus dapibus posuere sed vel neque. Nullam in risus mauris. Phasellus vel maximus mi. Suspendisse sodales rutrum congue.

Nam feugiat bibendum est, quis interdum est feugiat quis. Nulla facilisi. Curabitur diam urna, posuere quis nibh ultrices, pretium accumsan nibh. Etiam sagittis ex nibh, id faucibus metus varius dignissim. Nulla vel tempus nisi, in consequat est. Sed venenatis egestas urna, non molestie justo laoreet vitae. Mauris eu lacinia velit.

Praesent laoreet eleifend quam vitae ornare. Morbi nibh lacus, pretium ut elit sit amet, consectetur pretium felis. Phasellus non arcu sed odio semper vulputate. Nunc interdum consequat mi nec dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut vulputate est, non vulputate urna. Ut est dolor, consequat ac convallis id, congue id nibh. Suspendisse ornare tellus egestas convallis rutrum. Integer convallis sit amet turpis sit amet suscipit. Nam at ligula mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; In vestibulum eget justo vitae tincidunt. Aliquam egestas turpis nunc, at laoreet enim consectetur id. Nulla posuere eros sit amet ultrices sodales. Aliquam erat volutpat. Vivamus eget odio leo.

Sed eleifend ut mauris in tristique. Integer condimentum vestibulum lectus et laoreet. Aenean convallis lacinia sem, in venenatis turpis facilisis quis. Nulla nec sagittis enim. Aenean consequat tincidunt fringilla. Donec urna purus, laoreet vel lobortis vel, pretium eget risus. Ut eleifend tincidunt massa pellentesque cursus. Sed tempor placerat metus, quis lobortis risus. Sed blandit enim feugiat congue maximus. Pellentesque ac facilisis nisl. Nullam vel odio in turpis rhoncus ultricies eget nec velit. Praesent sit amet tincidunt ligula. Donec mollis et metus quis vestibulum.
 </div>