1 
<svg
  viewBox="0 0 100 100"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  className="ml-10 mt-12 justify-center w-[4.5rem]  h-[4.5rem] 1000:h-40 1000:w-40 1000:ml-10  "
>
  <polygon
    fill="rgba(255, 255, 255, 0.5)"
    fillOpacity=".3"
    stroke="#C85083"
    strokeWidth="3"
    className="backdrop-blur-md"
    points="50 1 95 25 95 75 50 99 5 75 5 25"
    >
  </polygon>
</svg>

I am using Tailwind in my project, but the backdrop filter blur is not being applied on my polygon shape. Any advice?

Improve this question
1
  • Back-drop blurs were not supported on SVG sub-elements last time I checked (althought that was a while ago). Try moving it to the containing SVG and see if that works.
    – Michael Mullany
    Commented Jun 21 at 10:30

1 Answer 1

Reset to default
1

The attribute to use is class, instead of className.

In the example below, I copied the relevant class from the Tailwind documentation,and added a gradient to simulate whatever background you might have:

svg {
     background: linear-gradient(
        90deg,
        rgba(255, 0, 0, 1) 0%,
        rgba(255, 154, 0, 1) 10%,
        rgba(208, 222, 33, 1) 20%,
        rgba(79, 220, 74, 1) 30%,
        rgba(63, 218, 216, 1) 40%,
        rgba(47, 201, 226, 1) 50%,
        rgba(28, 127, 238, 1) 60%,
        rgba(95, 21, 242, 1) 70%,
        rgba(186, 12, 248, 1) 80%,
        rgba(251, 7, 217, 1) 90%,
        rgba(255, 0, 0, 1) 100%
    );
}

.backdrop-blur-md {
  backdrop-filter: blur(12px);
}
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <polygon
    fill="rgba(255, 255, 255, 0.5)"
    fillOpacity=".3"
    stroke="#C85083"
    strokeWidth="3"
    class="backdrop-blur-md"
    points="50 1 95 25 95 75 50 99 5 75 5 25"
    >
  </polygon>
</svg>

Improve this answer
2
  • still background filter not blurring items behind that
    – Alleria
    Commented Jun 21 at 10:03
  • You're going to have to come up with a more representative example then, because the answer above demonstrably shows that the background is in fact blurrred.
    – Robby Cornelissen
    Commented Jun 23 at 4:03

Not the answer you're looking for? Browse other questions tagged or ask your own question.