HTML

CSS

JS

* {
    box-sizing: border-box;
}

html {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 18px;
    line-height: 1.45;
}

body {
    margin: 0;
}

main {0), oklch(0.35 0.37 330), oklch(0.3 0.37 310));
    display: grid;
    height: 100svh;
    place-items: center;
}

@property --bg-angle {
    inherits: false;
    initial-value: 0deg;
    syntax: "<angle>";
}

article {
    animation: spin 2.5s infinite linear paused;
    background: linear-gradient(to bottom, oklch(0.1 0.2 240 / 0.95), oklch(0.1 0.2 240 / 0.95)) padding-box,
        conic-gradient(from var(--bg-angle) in oklch longer hue, oklch(1 0.37 0) 0 0) border-box;
    border: 6px solid transparent;
    border-radius: 1rem;
    box-shadow: 0.125rem 0.25rem 0.25rem 0.5rem oklch(0.1 0.37 315 / 0.25);
    color: white;
    padding: 1rem;
    width: min(400px, 90vw);
    &:hover {
        animation-play-state: running;
    }
    & h1 {
        line-height: 1.1;
        margin: 0;
    }
    & p {
        margin: 0.75rem 0 0;
    }
}

@keyframes spin {
    to {
        --bg-angle: 360deg;
    }
}

Beautiful Card Design with Animated Gradient Border

Another card design with an animated gradient border. This one has a very unique hover effect. If you hover over the card, you will see the card’s background spinning with different colors.