Generador de tarjetas CSS
Título de la tarjeta
Esta es una vista previa de tu tarjeta.
Una tarjeta es el contenedor que hay detrás de los mosaicos de producto, las vistas previas de blog, los perfiles y los widgets de panel. Este generador estiliza ese contenedor: elige el color de fondo y de borde, el radio de las esquinas, el relleno interior y una sombra suave, y previsualiza el resultado en la página. La vista previa muestra contenido de ejemplo; sustitúyelo por tu propio título, texto y acciones. El resultado es una clase CSS lista para usar.
Cómo estilizar un contenedor de tarjeta
-
1
Elige los colores
Selecciona el color de fondo y el color del borde de la tarjeta.
-
2
Define la forma
Elige el radio de las esquinas y el relleno interior que encajen con tu diseño.
-
3
Añade la sombra
Ajusta el desenfoque y la opacidad de la sombra suave que cae bajo la tarjeta.
-
4
Previsualiza y copia
Revisa la vista previa en vivo y copia el CSS .card generado en tu hoja de estilos.
Qué contiene el CSS generado
La herramienta genera una única clase llamada .card:
.card {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 24px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
- background es el color que elegiste
- border siempre es de 1 px sólido con el color que elegiste
- border-radius y padding son los valores elegidos en px
- box-shadow usa un desplazamiento fijo de 4 px hacia abajo con tus valores de desenfoque y opacidad
La vista previa es un marcador de posición
La vista previa muestra un título y un párrafo para que juzgues las proporciones. La herramienta no genera HTML: aplica la clase a tu propio contenedor y añade dentro tu título, texto, imagen o botones de acción. Si la tarjeta va a quedar sobre un fondo de página de color, comprueba allí el contraste del borde, no solo en la vista previa.
Límites razonables
Los valores negativos se limitan a cero y la opacidad de la sombra se mantiene entre 0 y 1. Valores de relleno o desenfoque muy grandes pueden dar resultados inesperados, así que mantén los controles dentro de los rangos que usarías en un diseño real.
Combinación con tu propio marcado
Un ejemplo mínimo para tu página:
<div class="card">
<h3>Nombre del producto</h3>
<p>Descripción breve</p>
</div>
El estilo del contenedor no limita lo que va dentro: solo gestiona el fondo, el borde, el espaciado y la sombra.
Preguntas frecuentes
No. Solo genera la clase CSS .card. Construye tú el marcado, por ejemplo un div o un article que envuelva tu título, texto y acciones.
El borde generado siempre es de 1 px sólido. Edita la línea de border en el CSS si necesitas otro grosor o estilo.
Un desplazamiento vertical fijo de 4 px mantiene la sombra sutil y legible. Tú controlas su suavidad (desenfoque) y su intensidad (opacidad).
No. El texto de la vista previa es solo informativo. El CSS copiado no contiene contenido, únicamente los estilos del contenedor.
Herramientas relacionadas
Referencia de la tabla ASCII
Tabla ASCII completa del 0 al 127 con decimal, hex, octal, binario y referencia numérica HTML para cada carácter, incluidos los códigos de control como NUL, LF y DEL.
Referencia de caracteres HTML
Lista buscable de entidades HTML, sus códigos nombrados y numéricos, y una copia con un clic para caracteres y símbolos especiales.
Generador de letras aleatorias
Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.
Referencia de atajos de teclado
Busca los atajos predeterminados documentados de VS Code, Chrome y Bash con GNU Readline en macOS, Windows y Linux.
Formateador de JSON
Pega JSON para verlo con sangría de 2 o 4 espacios, minificarlo en una salida compacta o comprobar rápidamente la sintaxis antes de copiar el resultado.
Generador de Paletas de Color
Genera paletas monocromáticas, análogas, complementarias, triádicas o tetrádicas desde un color base HEX y exporta variables CSS listas para copiar.