پیشنمایش زنده
کد HTML
<div class="card">
<div class="card__content"></div>
<div class="blob blob-1"></div>
<div class="blob blob-2"></div>
<div class="blob blob-3"></div>
<div class="blob blob-4"></div>
</div>
کد CSS
.card {
position: relative;
width: 190px;
height: 254px;
background: lightgrey;
box-shadow: 12px 12px 20px -12px rgba(0,0,0,0.75);
z-index: 1;
border-radius: 21px;
overflow: hidden;
transform: rotate(-2deg);
}
.card__content {
background: linear-gradient(rgba(255, 255, 255, 0.473), rgba(150, 150, 150, 0.25));
z-index: 1;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 21px;
}
.blob {
position: absolute;
z-index: -1;
border-radius: 50%;
width: 150px;
height: 150px;
filter: blur(15px);
opacity: 0.5;
}
.blob-1 {
left: -65px;
top: -45px;
background: #59C173;
/* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #5D26C1, #a17fe0, #59C173);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #5D26C1, #a17fe0, #59C173);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
transform: rotate(12deg);
}
.blob-2 {
left: -30px;
top: 120px;
background: #A8EB12;
/* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #54C0EC, #A8EB12);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #54C0EC, #A8EB12);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
transform: rotate(20deg);
}
.blob-3 {
right: -60px;
bottom: -10px;
background: #CC2E5C;
/* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #753a88, #CC2E5C);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #753a88, #CC2E5C);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
transform: rotate(-10deg);
}
.blob-4 {
right: -70px;
top: 20px;
background: #FFA17F;
/* fallback for old browsers */
background: -webkit-linear-gradient(to bottom right, #B993D6, #8CA6DB, #FFA17F);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom right, #B993D6, #8CA6DB, #FFA17F);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
transform: rotate(-25deg);
}