Settings
15
0.05
5
30px
0.30

Background

1.00
0px
Color Preview
0.15
1.00
1.00

Color Preview

#EB8EFD

Generated CSS
.glass-card-colored {
width: 240px;
height: 360px;
background: rgba(235, 142, 253, 0.15);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border-radius: 30px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.5),
inset 0 -1px 0 rgba(255, 255, 255, 0.1),
inset 0 0 10px 5px rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
 
.glass-card-colored::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.8),
transparent
);
}
 
.glass-card-colored::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 100%;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.8),
transparent,
rgba(255, 255, 255, 0.3)
);
}
.glass-card {
width: 240px;
height: 360px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border-radius: 30px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.5),
inset 0 -1px 0 rgba(255, 255, 255, 0.1),
inset 0 0 10px 5px rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
 
.glass-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.8),
transparent
);
}
 
.glass-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 100%;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.8),
transparent,
rgba(255, 255, 255, 0.3)
);
}
Gradient Controls

Colors

Adjustments

0.15
1.00
1.00

Settings

1.0
145°

Quick Presets

Live Preview

Enable Gradient