پیش‌نمایش زنده
کد 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);
}
نوع: card
تاریخ ایجاد: 2026/06/06
آخرین بروزرسانی: 2026/06/06