Animated Gradient Border Card
High-contrast card with animated gradient border on neutral background
Code
.gradient-border-card-contrast {
width: 350px;
height: 220px;
background: #ffffff;
border-radius: 16px;
padding: 24px;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
}
.gradient-border-card-contrast::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, #ff0000, #ff9900, #33cc33, #3399ff, #cc33ff, #ff0000);
background-size: 400% 400%;
border-radius: 18px;
z-index: -1;
animation: gradient-rotate 8s linear infinite;
}
.gradient-border-card-contrast h3 {
font-size: 28px;
color: #222222;
margin: 0 0 12px 0;
font-weight: 700;
}
.gradient-border-card-contrast p {
font-size: 16px;
color: #555555;
margin: 0;
line-height: 1.5;
}
@keyframes gradient-rotate {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}HTML
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="gradient-border-card-contrast"</span>>
<"attr-name"</span>>class</span>="tag"</span>>h3</span>>Gradient Border</"attr-name"</span>>class</span>="tag"</span>>h3</span>>
<"attr-name"</span>>class</span>="tag"</span>>p</span>>High contrast animated gradient border with clean white background</"attr-name"</span>>class</span>="tag"</span>>p</span>>
</"attr-name"</span>>class</span>="tag"</span>>div</span>>