پیش‌نمایش زنده
کد HTML
<div class="card">
  I am made with only one div. I also use calc for my radius so it's always
  perfectly sized!
</div>
کد CSS
.card {
  --border-radius: 1.25rem;
  --border-width: 0.5rem;

  position: relative;

  width: 190px;
  height: 254px;
  border-radius: var(--border-radius);
  padding: 20px;

  background: rgb(5, 6, 45);
  color: white;
}

.card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;

  background-image: linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb);
  box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;

  margin: calc(-1 * var(--border-width));
  border-radius: calc(var(--border-radius) + var(--border-width));
}
نوع: card
تاریخ ایجاد: 2026/06/06
آخرین بروزرسانی: 2026/06/06