CSS · Diseño visual
Generador de box-shadow CSS online
Diseña sombras CSS con controles visuales, múltiples capas, transparencia y una vista previa inmediata.
Generador de Sombras CSS
Configuración
Presets editables
Vista previa
Guía rápida
¿Qué es box-shadow?
box-shadow permite añadir una o varias sombras alrededor de un elemento. Esta herramienta genera el código sin ejecutar CSS introducido por el usuario.
Sintaxis de box-shadow
La sintaxis combina offset-x, offset-y, blur, spread y color. La palabra inset convierte una sombra exterior en interior.
Desenfoque y extensión
El desenfoque suaviza los bordes de la sombra. La extensión la expande o la contrae; el desenfoque nunca puede ser negativo.
¿Qué hace inset?
Una sombra inset se dibuja dentro del elemento, útil para crear profundidad interior o efectos hundidos.
Varias sombras
CSS permite separar varias sombras mediante comas. Se aplican en el orden mostrado por la herramienta y puedes reordenarlas con los botones.
Preguntas frecuentes
Preguntas sobre sombras CSS
¿Cómo crear una sombra en CSS?
Ajusta los controles y copia la declaración box-shadow generada.
¿Qué significa box-shadow?
Es la propiedad CSS que dibuja una o varias sombras alrededor de una caja.
¿Cómo hacer una sombra suave?
Usa offsets pequeños, un blur amplio y una opacidad baja.
¿Qué es el blur?
Es el radio de desenfoque que suaviza la transición de la sombra.
¿Qué es spread?
Es la extensión que aumenta o reduce el tamaño de la sombra antes del desenfoque.
¿Cómo crear una sombra interior?
Activa Sombra interior para añadir la palabra clave inset.
¿Puedo usar varias sombras?
Sí. Añade capas y reordénalas; el código las separará con comas.
¿Cómo hacer una sombra transparente?
Elige un color y ajusta la opacidad con el control correspondiente.
¿Funciona en navegadores modernos?
box-shadow está disponible en los navegadores modernos habituales.
