<div class="card2">
🖼️
</div>
body {
text-align: center;
background: #f2f2f2;
}
.card2 {
position: relative;
border: 5px solid transparent;
background: #f2f2f2;
background-clip: padding-box;
border-radius: 10px;
width: 8rem;
padding: 5rem 2rem;
margin: 5rem auto;
font-size: 100px;
}
.card2::after {
content: '';
position: absolute;
top: -5px;
bottom: -5px;
left: -5px;
right: -5px;
background: linear-gradient(to bottom right, #22c1c3, #fdbb2d);
z-index: -1;
border-radius: 10px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.