[Feature]: Shapes with blur background.

[abhaybisht314ecorp]

CheckList

• I agree to follow this project's Code of Conduct
• I have read and followed the Contributing Guide
• I have searched and referenced existing issues, feature requests and discussions
• I am filing a FEATURE request.

Description

1. I want to make shapes with blurry background ( glassmorphic in nature ).

Current State

1. There is now way of adding CSS styles to fabric shapes, that can help me to achieve this.
   eg: filter: blur(10px);
   backdrop-filter: blur(10px);

Additional Context

No response

[asturur]

What is a shape with a blurred background exactly?
If a shape had a blurred background, everything behind it would still look unblurred if the shape is filled as a color.
If you can still fill up the shape with a pattern made of a blurred image.

[abhaybisht314ecorp]

@asturur i want to achieve this with fabric.js.

[asturur]

Yes blurring the shape background will do nothing. you have to make a pattern in the shape with the image behind it, and blur the image used for the pattern, then update the pattern offset to reflect the shape moving.
Is a complex effect and can be also not feasible depending on how you want to use it