Generador de tarjetas (cards) en CSS (sección de servicios)
Escribe las tarjetas, una por bloque, y elige el estilo. La cuadrícula usa auto-fit, así que las tarjetas se reorganizan solas del celular a la computadora.
Cómo usarTarjetas de servicios para el sitio
Disponible en: 
Generador de tarjetas (cards) en CSS (sección de servicios): para qué sirve
Las tarjetas son la forma más común de presentar servicios, ventajas o productos en una página. Este generador arma la sección con título y las tarjetas que escribas, cada una con ícono o imagen, título, texto y enlace.
La cuadrícula usa repeat(auto-fit, minmax()), que reorganiza las tarjetas sola del celular a la computadora sin media queries. Elige entre sombra, borde o fondo de color, el ancho mínimo, la tarjeta completa clicable con un único enlace accesible y el efecto de subir al pasar el mouse, que solo aparece en dispositivos con mouse y respeta a quien prefiere menos movimiento.
Cómo usar
- Escribe una tarjeta por línea.
- Elige el estilo, el color y el ancho mínimo.
- Copia el código y pégalo en la página.
Cuándo usar
- Sección de servicios de un taller o salón.
- Ventajas de un producto.
- Lista de categorías de una tienda.
Preguntas frecuentes
¿Cómo se ajustan las tarjetas al celular?
La cuadrícula usa grid-template-columns con repeat(auto-fit, minmax(...)): caben tantas tarjetas como permita el ancho, cada una con el ancho mínimo elegido. En el celular queda una por fila, en la tableta dos y en la computadora tres o cuatro, sin media query.
¿Puedo hacer que toda la tarjeta sea clicable?
Sí. Marca la opción e indica el enlace en cada tarjeta: el código usa el título como enlace y extiende el área de clic a toda la tarjeta con un pseudoelemento, manteniendo el HTML accesible (un solo enlace por tarjeta, con texto).
¿Emoji o ícono?
Las tarjetas aceptan un símbolo corto o una imagen. Para un aspecto más profesional, usa íconos SVG del mismo conjunto (como Lucide o Heroicons) pegando la dirección de la imagen en el campo de la tarjeta.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.