Card Generator
Progetta componenti card CSS con anteprima live. Regola padding, ombra, bordo ed effetti hover — copia HTML + CSS pronti.
① Regola padding e border radius ② Scegli ombra ed effetto hover ③ Copia CSS e HTML
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>Cosa rende un componente card CSS ben progettato?
Una card CSS è uno dei pattern UI più versatili nel web design. Raggruppa contenuti correlati in un'unità visivamente contenuta, tipicamente con sfondo bianco o di superficie, border-radius per angoli arrotondati e box-shadow per la profondità. I livelli di ombra seguono una scala: sm (elevazione sottile), md (card standard), lg (pannello fluttuante) e xl (modale o overlay). Gli effetti hover aggiungono interattività: lift usa transform: translateY(-4px) e glow aggiunge un contorno colorato.