Card Generator
Ontwerp CSS-kaartcomponenten met live voorbeeld. Pas padding, schaduw, rand en hover-effecten aan — kopieer schone HTML + CSS.
① Pas padding en border radius aan ② Kies schaduw en hover-effect ③ Kopieer de CSS en HTML
#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>Wat maakt een goed ontworpen CSS-kaartcomponent?
Een CSS-kaart is een van de meest veelzijdige UI-patronen. Het groepeert gerelateerde inhoud in een visueel afgebakende eenheid met border-radius en box-shadow. Schaduwniveaus: sm (subtiele verhoging), md (standaard kaart), lg (zwevend paneel) en xl (modaal). Hover-effecten: lift met transform: translateY(-4px) en glow met gekleurde contour.
Veelgestelde vragen
Een CSS-kaart is een op zichzelf staand UI-blok dat gerelateerde inhoud groepeert, met achtergrondkleur, border-radius, padding en box-shadow.
box-shadow neemt horizontale offset, verticale offset, vervagingsradius, spreidingsradius en kleur. Voor kaarten gebruik je 0 voor horizontale offset en lage vervagingswaarden.
Lift verplaatst de kaart omhoog met transform: translateY(-4px) bij hover en vergroot de box-shadow om het zweven van de kaart te simuleren.
Gebruik schaduw voor kaarten op witte of lichte achtergronden. Gebruik randen op donkere of getextureerde achtergronden.
Kaarten gebruiken doorgaans width: 100% met max-width. In rasters: CSS Grid met grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)).
Kleine kaarten: 8–12px. Standaard kaarten: 12–16px. Grote panelen: 16–24px.
Gebruik CSS custom properties voor achtergrond- en schaduwkleuren. In donkere modus, verminder de schaduwdekking.