Design for AIEck-Spotlight
Eck-Spotlight: CSS-Card. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.
Spotlight
A radial highlight grows from the corner on hover, no pointer tracking needed.
CSS
.card-089 {
position: relative;
width: 280px;
padding: 24px;
background: #0a0a0a;
border: 1px solid #262626;
border-radius: 16px;
overflow: hidden;
font-family: system-ui,sans-serif;
color: #fafafa;
isolation: isolate
}
.card-089::before {
content: "";
position: absolute;
width: 320px;
height: 320px;
left: -160px;
top: -160px;
border-radius: 50%;
background: radial-gradient(circle,rgba(56,189,248,.35),transparent 60%);
opacity: 0;
transform: scale(.5);
transition: opacity .4s,transform .6s cubic-bezier(.2,.8,.2,1);
z-index: -1
}
.card-089:hover::before {
opacity: 1;
transform: scale(1.3)
}
.card-089:hover {
border-color: #0ea5e9
}
.card-089 h3 {
margin: 0 0 6px;
font-size: 18px
}
.card-089 p {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: #a3a3a3
}
HTML
<article class="card-089">
<h3>Spotlight</h3>
<p>A radial highlight grows from the corner on hover, no pointer tracking needed.</p>
</article>Prompt
Baue eine 280px fast schwarze Card (#0a0a0a, 1px #262626 Rahmen, 16px Radius, 24px Padding, overflow hidden, isolation isolate). Ein 320px runder radialer Glow (rgba(56,189,248,.35) zu transparent bei 60%) ist an der oberen linken Ecke hinter dem Inhalt verankert, versteckt bei Deckkraft 0 und Skalierung .5; beim Hover blendet er ein und skaliert über 600ms mit federnder Kurve auf 1.3, während der Rahmen himmelblau #0ea5e9 wird. 18px weißer Titel, 14px #a3a3a3 Text.