CODEWITHSUNDEEP
cssbackgroundtailwind-cssblurbackdrop
Void
Void

Reputation: 67

How to display the backdrop blur filter over radial-gradient pattern background in Tailwind?

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?

Upvotes: 0

Views: 9287

Answers (1)

Ricardo Silva
Ricardo Silva

Reputation: 1493

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.

Upvotes: 1

Related Questions