<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?
The attribute to use is class, instead of className:
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>