Backdrop Filter (Blur) not showing up in the output

[curious-gurbir]

I am trying to make a glass effect using backdrop-filter on a div but blur is not showing up in the html2canvas output image.

I used backdrop-filter: blur(10px) along with background-color: rgba(0,0,0,0.3) but only semi-transparent background is visible without blur.

Here is the demo of what I am trying to do and what's going wrong!

[akshaykadambatt]

Yes same for me. Using "html2canvas": "^1.3.2" (React Typescript)

[simpleneeraj]

I have the same issue 😕 and i explore more about backdrop-filter,

Learn More

In this library they used foreign-object and foreign-object doesn't support backdrop-filter

Wait for implementation... Any other library you have to make html to canvas

[DinoSourcesRex]

Any progress on this? Or any work arounds?

[aniket-solulab]

facing same issue the backdrop css does not gets capture please help us