Design for AIDegradado a la deriva
Degradado a la deriva: tarjeta en CSS. Copia las reglas, o el prompt que reproduce el resultado.
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
Crea una tarjeta de 280px con un fondo arcoíris en movimiento lento: un degradado lineal a 120deg que pasa por #f43f5e, #f97316, #eab308, #22c55e, #06b6d4, #8b5cf6 y vuelve a #f43f5e, background-size 300% 300%, con background-position animándose de 0% a 100% y de vuelta durante 8s ease-in-out (acelera a 3s en hover). Radio 18px, padding 26px, texto blanco con una sombra de texto tenue: título 22px, texto 14px, y un botón píldora blanco con texto negro que se eleva 1px en hover.