<div class="color-shift">
<div class="color-shift__blob"></div>
</div>
<style>
.color-shift {
position: relative;
width: 200px;
height: 140px;
border-radius: 18px;
background: #0b1120;
border: 1px solid rgba(255, 255, 255, 0.2);
overflow: hidden;
}
.color-shift__blob {
position: absolute;
inset: -20% auto auto -20%;
width: 80%;
height: 140%;
background: conic-gradient(from 90deg, #3b82f6, #8b5cf6, #22d3ee, #3b82f6);
animation: hueSpin 6s linear infinite;
opacity: 0.7;
}
@keyframes hueSpin {
to {
transform: rotate(360deg);
}
}
</style>