Awesome Card
This card has a moving two-color wave around the border. Change colors or speed in the CSS :root variables.
New
You can place any content inside — forms, images, buttons. The animated border is created by an animated gradient on the wrapper and inner padding hides the background so only the border is visible.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Card with 2-Color Moving Wave Border</title>
<style>
:root{
--c1: #ff3d7f; /* pink-ish */
--c2: #00d4ff; /* cyan-ish */
--card-bg: #ffffff;
--radius: 16px;
--border-thickness: 3px;
--speed: 2s; /* animation speed */
}
/* page centering */
body{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
padding:0px;
margin:0;
color:#0b1320;
}
/* The outer wrapper that shows the animated two-color wave as the border */
.wave-border{
position:relative;
border-radius:calc(var(--radius) + var(--border-thickness));
padding: var(--border-thickness);
/* the moving gradient acts as the "wave" on the border */
background: linear-gradient(90deg, var(--c1) 0%, var(--c2) 25%, var(--c1) 50%, var(--c2) 75%, var(--c1) 100%);
background-size: 300% 100%;
animation: wave-move var(--speed) linear infinite;
/* subtle glow */
box-shadow: 0 6px 24px rgba(0,0,0,0.45);
}
/* inner card content with rounded corners to hide the background except the border padding */
.card{
display:block;
background: var(--card-bg);
border-radius: var(--radius);
padding:24px 28px;
min-width:280px;
max-width: 100%;
box-shadow: 0 2px 8px rgba(2,6,23,0.08) inset;
}
h2{margin:0 0 8px 0; font-size:1.25rem}
p{margin:0 0 12px 0; line-height:1.45; color:#253046}
/* tiny decorative badge to show wave continues */
.badge{
display:inline-block;
font-size:0.75rem;
padding:6px 10px;
border-radius:999px;
background:linear-gradient(90deg,var(--c1),var(--c2));
color:white;
font-weight:600;
width: 161px;
cursor: pointer;
text-align: center;
}
/* Animation keyframes - slide the gradient to create movement */
@keyframes wave-move{
0%{ background-position: 0% 50%; }
100%{ background-position: 200% 50%; }
}
/* pause animation on hover to inspect the border */
.wave-border:hover{ animation-play-state: paused; }
/* small responsiveness */
@media (max-width:420px){
.card{ padding:18px; }
}
</style>
</head>
<body>
<div class="wave-border">
<div class="card">
<div style="display:flex; align-items:center; justify-content:space-between; gap:12px;">
<div>
<h2>Awesome Card</h2>
<p>This card has a moving two-color wave around the border. Change colors or speed in the CSS <code>:root</code> variables.</p>
</div>
<div class="badge">New</div>
</div>
<hr style="margin:14px 0; border:none; height:1px; background:#f1f5f9;">
<p style="font-size:0.95rem; color:#4b5563;">You can place any content inside — forms, images, buttons. The animated border is created by an animated gradient on the wrapper and inner padding hides the background so only the border is visible.</p>
</div>
</div>
</body>
</html>