Card Generator
Diseña componentes de tarjeta CSS con vista previa en vivo. Ajusta padding, sombra, borde y efectos hover — copia HTML + CSS.
① Ajusta padding y border radius ② Elige sombra y efecto hover ③ Copia el CSS y el 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>¿Qué hace que un componente de tarjeta CSS esté bien diseñado?
Una tarjeta CSS es uno de los patrones de UI más versátiles. Agrupa contenido relacionado en una unidad visualmente contenida con border-radius y box-shadow. Niveles de sombra: sm (elevación sutil), md (tarjeta estándar), lg (panel flotante) y xl (modal). Efectos hover: lift con transform: translateY(-4px) y glow con contorno de color.
Preguntas frecuentes
Una tarjeta CSS es un bloque de UI autónomo que agrupa contenido relacionado, con color de fondo, border-radius, padding y box-shadow.
box-shadow toma offset horizontal, offset vertical, radio de desenfoque, radio de expansión y color. Para tarjetas, usa 0 para el offset horizontal y valores de desenfoque bajos.
Lift mueve la tarjeta hacia arriba con transform: translateY(-4px) al pasar el cursor y aumenta el box-shadow para simular que la tarjeta flota.
Usa sombra para tarjetas en fondos blancos o claros. Usa bordes en fondos oscuros o texturizados.
Las tarjetas usan típicamente width: 100% con max-width. En cuadrículas: CSS Grid con grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)).
Tarjetas pequeñas: 8–12px. Tarjetas estándar: 12–16px. Paneles grandes: 16–24px.
Usa propiedades CSS personalizadas para colores de fondo y sombra. En modo oscuro, reduce la opacidad de la sombra.