Herramientas para desarrolladores
Generador de Sombra de Caja CSS
Diseña sombras de caja visualmente con controles deslizantes y obten el código CSS al instante.
Procesado en tu navegador
Herramienta RecomendadaAI Coding Assistant
GitHub Copilot
AI pair programmer that helps you write code faster with smart suggestions.
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.