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 used pseudo-element.
.gradient-border {
position: relative;
width: 300px;
height: 300px;
border-radius: 20px;
background: linear-gradient(135deg, rgba(35, 52, 156, 0.1), rgba(74, 75, 227, 0.5), rgba(255, 255, 255, 0.2));
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 20px;
backdrop-filter: blur(10px);
overflow: hidden;
}
.gradient-border::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background: linear-gradient(45deg, rgba(74, 75, 227, 1), rgba(255, 255, 255, 0.5));
border-radius: 20px;
padding: 1px;
box-sizing: border-box;
}
.gradient-border::after {
content: '';
position: absolute;
top: 1px;
left: 1px;
right: 1px;
bottom: 1px;
background: linear-gradient(135deg, rgba(35, 52, 156, 0.1), rgba(74, 75, 227, 0.5), rgba(255, 255, 255, 0.2));
border-radius: 19px;
z-index: -2;
} <div class="gradient-border">
Your Content Here
</div>This method allowed me to achieve a border radius with a gradient color, but the background color isn’t perfect, and the border color looks strange. Additionally, the backdrop filter doesn’t look good, and I can’t see the border in Safari.
Attached are three images:
- How the design CSS looks in Figma
- How my current UI looks
- 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
Note: The picture i post of current UI looks like dont have the content inside compare to desired UI. so ignore the content. i am just want exact border radius with border gradient color and background gradient color with backdrop filter.
Please help me achieve this design.