0

I'm experimenting with a fiber carbon pattern using Tailwind CSS and I'm wondering why the backdrop blur filter isn't considering the radial-gradient pattern that the parent <div> has as its background (the dots, it just sees the background color of #282828).

This works with an image as a background or other HTML tags under it.

<div class="bg-fiber-carbon flex h-screen w-screen flex-col items-center justify-center">
  <div class="mt-8 max-w-sm rounded bg-black/10 p-5 text-white backdrop-blur-md">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, in corporis rerum enim natus repellendus aspernatur porro impedit a velit nisi sapiente magni dicta libero consequatur recusandae nulla voluptas hic!
  </div>
</div>

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  .bg-fiber-carbon {
    background: radial-gradient(black 15%, transparent 16%) 0 0,
      radial-gradient(black 15%, transparent 16%) 8px 8px,
      radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%) 0 1px,
      radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%) 8px 9px;
    background-color: #282828;
    background-size: 16px 16px;
  }
}

Check it out in Tailwind Play

What I need is the backdrop filter to give a glossy background to the lorem text with white and gray dots blurred underneath.

I tried to achieve the background pattern with plain Tailwind but failed, that's why it's declared in the CSS base @layer

What am I doing wrong?

Void
  • 67
  • 7

1 Answers1

1

You need to reduce the blur effect like here

Or change the opacity, because the blur-md (12px) will basically render the bg grey, it is too much to keep the pattern visible.

Ricardo Silva
  • 1,221
  • 9
  • 19
  • Reducing opacity with `backdrop-opacity-70` won't display the blur at all, it just adds transparency to the container and the bullets underneath are just displayed normally. – Void Mar 14 '23 at 18:42
  • But using `backdrop-blur-[3px]` shows that it's displayed correctly, funny because just one pixel made the difference, it worked all the time but was not able to see it because of similar color palette and container background :D – Void Mar 14 '23 at 18:43