Generador de sombras CSS (box-shadow)
Crea sombras CSS realistas en varias capas: desplazamiento, desenfoque, extensión, color, interior. 10 estilos predefinidos, neumorfismo incluido. Código CSS y Tailwind.
- Gratis
- Sin registro
- Sin subir archivos
- Windows, Mac, Android, iPhone
Cargando la herramienta…
Acerca de esta herramienta
Compón valores box-shadow como los diseñadores: hasta 8 capas con desplazamiento, desenfoque, extensión, color y opacidad, sombras interiores y 10 estilos predefinidos (suave, flotante, neumorfismo, resplandor, contorno…). Ajusta también el radio y los colores de la vista previa y copia el código CSS o Tailwind.
Cuándo usarla
Tarjetas y botones
Una sombra suave de dos capas despega una tarjeta del fondo sin recargarla; una sombra más marcada al pasar el ratón la hace parecer que se eleva.
Campos y zonas hundidas
Una sombra interior (inset) hace que un campo de formulario parezca tallado en la página.
Efectos de resplandor
Una sombra de color sin desplazamiento crea un halo luminoso, útil para destacar un elemento activo.
Cómo se usa
- Parte de un estilo predefinido (suave, profunda, neumorfismo…).
- Ajusta cada capa: desplazamiento, desenfoque, extensión, color.
- Copia el código CSS o Tailwind.
Cómo funciona
Cada capa se convierte en un valor box-shadow: «inset» opcional, desplazamientos horizontal y vertical, desenfoque, extensión y un color rgba(). Las capas se separan con comas; la primera se dibuja encima.
La vista previa aplica exactamente el valor copiado. La versión Tailwind usa un valor arbitrario shadow-[…] en el que los espacios se convierten en guiones bajos.
Consejos para un mejor resultado
- Mantén las sombras discretas (opacidad del 5 al 20 %): una sombra demasiado oscura parece sucia.
- Usa un color de sombra teñido (azul marino mejor que negro) para un resultado más rico.
- Mantén la misma dirección de luz en todas las sombras de una página.
- Para el neumorfismo, el elemento y el fondo deben tener el mismo color.
Problemas frecuentes y soluciones
La sombra sale cortada
Un padre con overflow: hidden recorta las sombras que sobresalen. Añade relleno (padding) al padre.
La sombra no sigue la forma de mi imagen
box-shadow sigue el rectángulo. Para una imagen recortada, usa filter: drop-shadow().
El neumorfismo tiene poco contraste
Es el límite del estilo: resérvalo para elementos decorativos y usa bordes o textos contrastados para lo importante.
Preguntas frecuentes
¿Por qué varias capas de sombra?
En la realidad, una sombra es nítida cerca del objeto y difusa más lejos. Apilar dos o tres sombras con distinto desenfoque resulta mucho más natural que una sola.
¿Para qué sirve la extensión?
Agranda o reduce la sombra antes del desenfoque. Una extensión negativa mantiene la sombra bajo el elemento, para un efecto de tarjeta flotante.
¿Qué es el neumorfismo?
Un estilo en el que el elemento parece tallado en el fondo: una sombra oscura de un lado y una clara del otro, sobre un fondo del mismo color que el elemento.
¿box-shadow o drop-shadow?
box-shadow sigue el rectángulo del elemento (con su radio). filter: drop-shadow() sigue la forma real de un PNG transparente o de un clip-path.
Búsquedas relacionadas
¿Sigues atascado?
Pregunta en el foro: la categoría, la herramienta, la ficha de tu dispositivo y el resultado de la prueba se rellenan solos.