Generador de sombras CSS con vista previa en tarjetas | We.Inc
Crea sombras CSS por capas y pruébalas en tarjetas reales de servicios y precios, con fondos claros y oscuros y un estado de foco visible. Copia el CSS y un componente de tarjeta listo.
Es difícil evaluar las sombras sobre un cuadrado gris. Aquí puedes ajustar una sombra box-shadow por capas y verla en una tarjeta de servicios y otra de precios, sobre una página clara u oscura y con un anillo de foco que puedes probar con Tab. Copia el CSS o el componente completo de la tarjeta cuando te guste el resultado. Todo funciona en tu navegador. No enviamos a We.Inc ni a nadie más lo que escribas, y se borra al cerrar la pestaña.
Elige un ajuste predefinido o modifica la primera capa: desplazamiento horizontal y vertical, desenfoque, expansión, color, opacidad e inset.
Añade hasta cinco capas. Las sombras por capas (una estrecha y otra amplia y suave) se ven más naturales que una única sombra grande.
Cambia la vista previa entre una página clara y una oscura. Pulsa Tab para enfocar los botones de la tarjeta y comprobar que el anillo de foco siga visible.
Las comprobaciones avisan si la sombra es demasiado tenue para el fondo elegido y si el texto de la tarjeta no alcanza el contraste WCAG AA.
Copia la declaración box-shadow o el componente completo de la tarjeta con HTML y CSS.
Sobre fondos oscuros, las sombras casi desaparecen. Usa una tarjeta de color algo más claro o un borde fino para separar la tarjeta.
Tiñe el color de la sombra hacia el color del fondo, en vez de usar negro puro, para lograr un aspecto más suave.
No uses solo una sombra para mostrar el foco. Añade también un contorno visible.
Los valores grandes de desenfoque cuestan más de dibujar. Evita animarlos en listas largas.
Usa uno o dos niveles de sombra en todo el sitio para que la profundidad tenga significado.
Preguntas frecuentes
¿Cómo funciona la propiedad CSS box-shadow?
box-shadow acepta un desplazamiento horizontal, uno vertical, un radio de desenfoque opcional, una expansión opcional y un color, además de la palabra clave inset para sombras interiores. Puedes indicar varias sombras separadas por comas; la primera se dibuja encima.
¿Por qué se ven mejor las sombras por capas?
Los objetos reales proyectan una sombra nítida cerca y otra amplia y suave más lejos. Dos o tres capas con más desenfoque y menos opacidad imitan ese efecto.
¿Por qué no se ve mi sombra sobre un fondo oscuro?
Una sombra oscura sobre una página oscura casi no tiene contraste. La herramienta te avisará. Eleva visualmente la tarjeta con una superficie más clara o un borde sutil.
¿box-shadow afecta a la accesibilidad?
Las sombras son decorativas y no tienen que cumplir por sí mismas las reglas de contraste. Lo importante es que el texto de la tarjeta sea legible y que el foco se indique con un contorno visible, no solo con un cambio de sombra.
¿El generador de sombras CSS es gratis?
Sí, sin registro. Copia el código en cualquier proyecto.
Prueba las sombras en los componentes que publicarás
Una sombra que se ve bien en un cuadrado aislado puede resultar pesada en una fila de tarjetas de precios o desaparecer debajo de una foto. Previsualizarla en tarjetas habituales de sitios para pequeños negocios —una tarjeta de servicio con icono y un plan de precios destacado— muestra el resultado real.
El código del componente incluye un contorno focus-visible para que la tarjeta siga siendo accesible con teclado, sea cual sea la sombra que elijas.