Generador de sombra CSS
Crea sombras CSS de caja visualmente con vista previa en vivo.
box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.25);Reportar un problema
¿Encontraste un error o tienes una sugerencia? Ayúdanos a mejorar esta herramienta.
¿Qué es esta herramienta?
El Generador de sombra CSS crea declaraciones box-shadow listas para producción con previsualización visual en vivo. Soporta sombras simples y múltiples capas, con controles para desplazamiento horizontal/vertical, radio de desenfoque, radio de expansión, color y la opción inset. Genera efectos de sombra complejos de forma visual sin escribir CSS a mano.
Cómo usar
- 1
Añadir capa de sombra
Haz clic en añadir para crear una nueva capa de sombra.
- 2
Ajustar parámetros
Establece el desplazamiento X/Y, el desenfoque, la expansión, el color y la opacidad de cada capa.
- 3
Vista previa y copiar
Ve la vista previa en vivo y copia el código CSS generado.
Preguntas frecuentes
¿Cómo funciona box-shadow?
box-shadow añade un efecto de sombra alrededor del marco de un elemento. Sintaxis: box-shadow: h-offset v-offset blur spread color inset. Varias sombras se separan por comas. El navegador renderiza cada capa de sombra de forma independiente y las compone juntas. Usa varias capas para crear efectos de profundidad complejos.
¿Qué hace realista una sombra?
Las sombras realistas tienen un desenfoque mayor en relación con el desplazamiento (típicamente 3-5 veces), una opacidad ligeramente menor (10-30%) y colores con tono cálido. Varias capas de sombra con distintos tamaños de desenfoque crean una profundidad más natural. Material Design proporciona valores de sombra específicos para distintos niveles de elevación.
¿Qué hago si el resultado parece incorrecto?
Comprueba tus valores de entrada dos veces. La herramienta usa fórmulas estándar, pero los casos límite pueden requerir verificación manual.