Generador de CSS Box Shadow
Genera declaraciones CSS de box-shadow con valores personalizables de desplazamiento, desenfoque, propagación, color y sombra interior.
Ejecutar herramienta
Genera código CSS para la propiedad box-shadow con controles numéricos y de color que ajustan la apariencia visual de cualquier elemento. Define el desplazamiento horizontal y vertical en píxeles para situar la sombra respecto al contenedor. Agrega desenfoque para suavizar el contorno exterior y ajusta la propagación para aumentar o reducir la cobertura total del efecto. El generador admite valores positivos, negativos o cero en los desplazamientos y la propagación, lo que permite crear sombras sutiles, efectos de elevación o bordes nítidos. También incluye un campo de color que acepta formatos como hexadecimal con canal alfa, y una casilla para activar sombras interiores. Al modificar los parámetros, la herramienta genera de forma inmediata la regla CSS completa, lista para copiar y pegar en tu hoja de estilos.
Instrucciones
- Introduce el desplazamiento horizontal y vertical en píxeles para posicionar la sombra.
- Ajusta los valores de desenfoque y propagación según el nivel de difusión deseado.
- Indica el color de la sombra mediante un valor de texto, por ejemplo en formato hexadecimal.
- Marca la opción de sombra interior si necesitas que el efecto se proyecte dentro del contenedor.
- Copia la declaración CSS generada y pégala en la hoja de estilos de tu proyecto.
Ejemplos
- Sombra sutil para tarjeta: Desplazamiento X: 0, Desplazamiento Y: 4, Desenfoque: 12, Propagación: 0, Color: #00000020, Sombra interior: desmarcada. Resultado: box-shadow: 0px 4px 12px 0px #00000020;.
- Efecto de hendidura interior: Desplazamiento X: 2, Desplazamiento Y: 2, Desenfoque: 6, Propagación: 1, Color: #00000040, Sombra interior: marcada. Resultado: box-shadow: inset 2px 2px 6px 1px #00000040;.
Preguntas frecuentes
¿Qué ocurre si se asigna el valor 0 a todos los campos numéricos?
Si todos los campos numéricos son 0, la regla produce 0px en los cuatro parámetros y el color seleccionado, dando una sombra sin desplazamiento ni desenfoque.
¿Cómo se activa una sombra interna en lugar de externa?
Simplemente marca la casilla de sombra interior (inset) para que la declaración CSS incluya automáticamente la palabra clave inset.
¿Qué formatos de color acepta el generador?
Acepta cualquier formato de color válido en CSS, como códigos hexadecimales con o sin canal alfa.