Tailwinds backdrop-blur

Hello, why is the text blurred if it is not behind it?

<div className="mt-12 absolute w-full h-full flex flex-wrap justify-center items-center gap-hero ">
              <div className="gap-2 pb-3 drop-shadow-xl white-transparent w-[13rem] h-[14rem] flex justify-center flex-col items-center rounded-xl">
                <Image
                  className="absolute top-[-3.5rem] "
                  src={"/img/f8.png"}
                  height={160}
                  width={160}
                  alt="motorcycle delivery"
                />
                <p className="mt-24 text-[#6b6b6b] font-[650] text-[1.2rem]">
                  Cerezas
                </p>
                <p className="text-[#808080] font-[650] text-[1.1rem]">
                  Cerezas Frescas
                </p>
                <p className="text-[1rem] font-semibold text-[#303030]">
                  <span className="text-red-600">$</span> 7.25
                </p>
              </div>
              <div className="backdrop-filter gap-2 pb-3 drop-shadow-xl white-transparent w-[13rem] h-[14rem] flex justify-center flex-col items-center rounded-xl">
                <Image
                  className="absolute top-[-3.5rem] "
                  src={"/img/f7.png"}
                  height={160}
                  width={160}
                  alt="motorcycle delivery"
                />
                <p className="mt-24 text-[#6b6b6b] font-[650] text-[1.2rem]">
                  Frambuesas
                </p>
                <p className="text-[#808080] font-[650] text-[1.1rem]">
                  Frambuesas Frescas
                </p>
                <p className="text-[1rem] font-semibold text-[#303030]">
                  <span className="text-red-600">$</span> 7.25
                </p>
              </div>
            </div>

image

image

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.