Card Generator
CSS-Card-Komponenten mit Live-Vorschau gestalten. Padding, Schatten, Rahmen und Hover-Effekte anpassen — HTML + CSS kopieren.
① Padding und Border-Radius anpassen ② Schatten und Hover-Effekt wählen ③ CSS und HTML kopieren
#FFFFFF
Card Title
Card body text goes here. Describe your content in a few sentences.
/* CSS */
.card {
padding: 24px;
border-radius: 12px;
background: #ffffff;
border: none;
box-shadow: 0 4px 12px rgba(0,0,0,.15);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
/* HTML */
<div class="card">
<h3 style="margin:0 0 8px">Card Title</h3>
<p style="margin:0 0 16px;opacity:.7;font-size:14px">Card body text goes here. Describe your content in a few sentences.</p>
<button style="padding:8px 16px;border-radius:6px;border:none;cursor:pointer">Action</button>
</div>Was macht ein gut gestaltetes CSS-Card-Komponente aus?
Eine CSS-Card ist eines der vielseitigsten UI-Muster im Webdesign. Sie gruppiert verwandte Inhalte in einer visuell abgegrenzten Einheit mit border-radius und box-shadow. Schattenstufen: sm (subtile Erhebung), md (Standard-Card), lg (schwebendes Panel) und xl (Modal). Hover-Effekte: lift mit transform: translateY(-4px) und glow mit farbiger Kontur.
Häufig gestellte Fragen
Eine CSS-Card ist ein eigenständiger UI-Block, der verwandte Inhalte gruppiert, mit Hintergrundfarbe, border-radius, padding und box-shadow.
box-shadow nimmt horizontalen Offset, vertikalen Offset, Unschärferadius, Ausbreitungsradius und Farbe. Für Cards verwende 0 für horizontalen Offset und niedrige Unschärfewerte.
Lift verschiebt die Card nach oben mit transform: translateY(-4px) bei Hover und erhöht den box-shadow, um die schwebende Card zu simulieren.
Verwende Schatten für Cards auf weißen oder hellen Hintergründen. Verwende Rahmen auf dunklen oder texturierten Hintergründen.
Cards verwenden typischerweise width: 100% mit max-width-Einschränkung. In Grids: CSS Grid mit grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)).
Kleine Cards: 8–12px. Standard-Cards: 12–16px. Große Panels: 16–24px.
Verwende CSS-Custom-Properties für Hintergrunds- und Schattenfarben. Im Dark Mode reduziere die Schattenopazität.