Design for AIHarter Schatten brutal
Harter Schatten brutal: CSS-Card. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.
No gradients allowed
Thick black lines, flat yellow, and a shadow that does not blur.
CSS
.card-032 {
width: 280px;
padding: 22px;
background: #fef08a;
border: 3px solid #000;
border-radius: 0;
box-shadow: 8px 8px 0 #000;
font-family: system-ui,sans-serif;
color: #000;
transition: transform .12s,box-shadow .12s
}
.card-032:hover {
transform: translate(4px,4px);
box-shadow: 4px 4px 0 #000
}
.card-032 h3 {
margin: 0 0 8px;
font-size: 22px;
font-weight: 900;
letter-spacing: -.01em
}
.card-032 p {
margin: 0 0 16px;
font-size: 14px;
line-height: 1.5
}
.card-032 button {
padding: 10px 18px;
border: 3px solid #000;
background: #fff;
font-weight: 800;
font-size: 13px;
text-transform: uppercase;
cursor: pointer;
box-shadow: 4px 4px 0 #000;
transition: background .12s,color .12s,box-shadow .12s
}
.card-032 button:hover {
background: #000;
color: #fef08a;
box-shadow: 2px 2px 0 #000
}
.card-032 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
HTML
<article class="card-032">
<h3>No gradients allowed</h3>
<p>Thick black lines, flat yellow, and a shadow that does not blur.</p>
<button>Read it</button>
</article>Prompt
Baue eine neo-brutalistische Card: 280px, flacher gelber #fef08a Hintergrund, 3px durchgezogener schwarzer Rahmen, kein Radius, harter Versatzschatten 8px 8px 0 #000 (kein Blur). Beim Hover verschiebt sich die Card 4px nach rechts und unten, während der Schatten auf 4px 4px schrumpft, sodass sie gedrückt aussieht. 22px schwarzer Titel in 900er Schnitt, 14px Fließtext und ein weißer Versalien-Button mit 3px schwarzem Rahmen und eigenem 4px hartem Schatten, der beim Hover zu Schwarz mit gelbem Text invertiert.