Generador de Sombra de Caja CSS
Disena sombras de caja visualmente con controles deslizantes y obten el codigo CSS al instante.
100% Client-Side
5px
5px
15px
0px
30%
box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.30);
Qué es Generador de Sombra de Caja CSS?
El generador de box-shadow CSS ofrece una interfaz visual para crear efectos de sombra, con vista previa en tiempo real y generacion automatica de codigo CSS.
Cómo usar
- Ajuste el desplazamiento X/Y para controlar la direccion
- Configure el radio de desenfoque y el radio de expansion
- Seleccione el color y la opacidad de la sombra
- Copie el codigo CSS generado
Preguntas frecuentes
- Que significa cada parametro de box-shadow?
- En orden: desplazamiento X (horizontal), desplazamiento Y (vertical), radio de desenfoque (suavizado), radio de expansion (tamano) y color.
- Como agrego multiples sombras?
- CSS permite separar multiples valores de sombra con comas, por ejemplo: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);
- Como uso una sombra interna (inset)?
- Agregue la palabra clave inset al inicio del valor para crear una sombra interior, comun en campos de texto enfocados o botones con efecto hundido.