پیشنمایش زنده
کد 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));
}