xxxxxxxxxx1
<div class="container mt-5">2
<div class="fancy-border-radius position-absolute"></div>3
4
<div class="row d-flex justify-content-center">5
<div class="col-lg-6">6
<div class="card-glass shadow-3 rounded-5 mt-4">7
<div class="p-4">8
<h1>Glassmorphism</h1>9
<p>10
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum11
perspiciatis, voluptatibus quas recusandae nesciunt alias12
veritatis mollitia esse ad officiis ipsa doloribus nostrum13
ratione rem vitae temporibus labore voluptates quasi.14
</p>15
</div>16
</div>17
</div>18
</div>19
</div>xxxxxxxxxx1
body {2
background-color: hsl(0, 0%, 90%);3
}4
/* These are the KEY styles - you can add them directly to any object you want in your project */5
.fancy-border-radius {6
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;7
8
/* These are ADDITIONAL styles - add them if you want an object exactly like in the demo above */9
width: 400px;10
height: 400px;11
background: #ad5389;12
background: -webkit-linear-gradient(to right, #3c1053, #ad5389);13
background: linear-gradient(to right, #3c1053, #ad5389);14
z-index: -5;15
}16
.card-glass {17
background: hsla(0, 0%, 100%, 0.2);18
backdrop-filter: blur(4px);19
}1
1
Console errors: 0