Genera sombras CSS con vista previa en vivo. Añade múltiples capas de sombra para profundidad y realismo.
Arrastra los controles para ajustar el desplazamiento horizontal, vertical, el radio de desenfoque, la extensión, el color y la opacidad de una sombra CSS. Marca Inset para un efecto de sombra interior. La vista previa se actualiza en tiempo real.
Usa los controles para ajustar cada parámetro de sombra. Marca Inset para una sombra interior. Haz clic en la muestra de color para cambiarlo. El CSS generado se actualiza en tiempo real — haz clic en Copiar para obtenerlo.
La extensión expande (valor positivo) o contrae (valor negativo) la sombra antes de aplicar el desenfoque. Una extensión positiva hace la sombra más grande que el elemento; negativa, más pequeña.
CSS admite múltiples box-shadows como lista separada por comas. Genera cada sombra aquí por separado y combínalas manualmente: box-shadow: sombra1, sombra2;
Esta herramienta funciona completamente en tu navegador. Nada de lo que escribes o pegas se envía a ningún servidor — todo el procesamiento ocurre localmente en tu dispositivo.