Design for AIDrifting gradient
Drifting gradient: a CSS card. Copy the rules, or the prompt that rebuilds it.
Living gradient
Background position drifts across a 300% wide gradient.
Get startedCSS
.card-090 {
width: 280px;
padding: 26px;
border-radius: 18px;
background: linear-gradient(120deg,#f43f5e,#f97316,#eab308,#22c55e,#06b6d4,#8b5cf6,#f43f5e);
background-size: 300% 300%;
animation: card-090-move 8s ease-in-out infinite;
color: #fff;
font-family: system-ui,sans-serif;
text-shadow: 0 1px 2px rgba(0,0,0,.15)
}
.card-090:hover {
animation-duration: 3s
}
.card-090 h3 {
margin: 0 0 6px;
font-size: 22px
}
.card-090 p {
margin: 0 0 16px;
font-size: 14px;
line-height: 1.5;
opacity: .92
}
.card-090 a {
display: inline-block;
padding: 9px 18px;
border-radius: 999px;
background: rgba(255,255,255,.9);
color: #111;
font-size: 13px;
font-weight: 700;
text-decoration: none;
text-shadow: none;
transition: background .15s,transform .15s
}
.card-090 a:hover {
background: #fff;
transform: translateY(-1px)
}
@keyframes card-090-move {
0%,100% {
background-position: 0 50%
}
50% {
background-position: 100% 50%
}
}
.card-090 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.card-090, .card-090 * { animation: none; transition: none; }
}
HTML
<article class="card-090">
<h3>Living gradient</h3>
<p>Background position drifts across a 300% wide gradient.</p>
<a href="#">Get started</a>
</article>Prompt
Create a 280px card with a slowly moving rainbow background: a 120deg linear gradient through #f43f5e, #f97316, #eab308, #22c55e, #06b6d4, #8b5cf6 and back to #f43f5e, background-size 300% 300%, with background-position animating from 0% to 100% and back over 8s ease-in-out (speeds up to 3s on hover). 18px radius, 26px padding, white text with a faint text shadow: 22px title, 14px text, and a white pill button with black text that lifts 1px on hover.