Animated Gradient Border Card

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="grad-card">
  <div class="grad-card-inner">
    <h3>Pro Analytics</h3>
    <p>Track your realtime growth with advanced telemetry.</p>
  </div>
</div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.grad-card { position: relative; width: 200px; padding: 2px; border-radius: 12px; overflow: hidden; background: #18181b; font-family: system-ui, sans-serif; }
.grad-card::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(#3b82f6, #ec4899, #8b5cf6, #3b82f6); animation: rotateGrad 4s linear infinite; }
.grad-card-inner { position: relative; background: #09090b; padding: 16px; border-radius: 10px; color: #fff; z-index: 1; }
.grad-card-inner h3 { margin: 0 0 6px 0; font-size: 14px; }
.grad-card-inner p { margin: 0; font-size: 11px; color: #a1a1aa; line-height: 1.4; }
@keyframes rotateGrad { 100% { transform: rotate(360deg); } }