Please read the complete post and check images as well. I tried my best to explain each and everything and what i achieved so far.

I’m trying to achieve a specific design for a div element. I want a border with a linear gradient color and a border radius, along with a background color that has a backdrop filter. I’ve tried two methods so far.

Method 1:
I used the following CSS:

borderRadius: “20px”,
boxShadow: “0px 4px 12px 0px rgba(0, 0, 0, 0.25)”,
backdropFilter: “blur(10px)”,
width: “298px”,
marginTop: “10px”,
border: “1px solid #4A4BE3”,
background:
“var(–effect, linear-gradient(0deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.20) 100%), linear-gradient(95deg, rgba(35, 52, 156, 0.10) 2.58%, rgba(74, 75, 227, 0.50) 98.49%))”,

This method achieved the perfect background color with a glass effect, but I couldn’t use a linear gradient border.

Method 2:
I used position, zIndex, backgroundClip, borderRadius, width, backdropFilter, and ::after pseudo-element.

position: "relative",
                zIndex: 0,
                backgroundClip: "padding-box",
                borderRadius: "20px",
                width: "298px",
                backdropFilter: "blur(10px)",
                "&::after": {
                  border: "1px solid transparent",
                  position: "absolute",
                  top: 1,
                  left: 1,
                  right: 1,
                  bottom: 1,
                  background:
                    "var(--effect, linear-gradient(0deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.20) 100%), linear-gradient(95deg, rgba(35, 52, 156, 0.10) 2.58%, rgba(74, 75, 227, 0.50) 98.49%)) padding-box,linear-gradient(to right, rgba(74, 75, 227, 1), rgba(255, 255, 255, 0.5)) border-box",
                  content: '""',
                  zIndex: -1,
                  borderRadius: "20px",
                },

This method allowed me to achieve a border radius with a gradient color, but the color isn’t perfect, and the border radius looks strange. Additionally, the backdrop filter doesn’t work, and I can’t see the border in Safari.

Attached are three images:

1. How the design CSS looks in Figma
2. How my current UI looks
3. The desired UI

In summary, I want to achieve a div element with:

• Border radius
• Border solid with linear gradient color
• Background color with backdrop filter

Please help me achieve this design.