Box Shadow Generator

Acerca de esta herramienta

Horizontal — positivo mueve la sombra a la derecha, negativo a la izquierda. Vertical — positivo mueve hacia abajo, negativo hacia arriba. Desenfoque — valores mayores crean sombras más suaves y difusas. Expansión — positivo agranda la sombra, negativo la encoge.

Activa inset para crear sombras internas. Añade varias sombras con "+ Añadir sombra" — se separan por comas en la salida CSS, apiladas de adelante hacia atrás.

Cómo usar

1. Ajusta los controles Horizontal y Vertical para fijar el desplazamiento de la sombra.
2. Aumenta el Desenfoque para una sombra suave, o ponlo en 0 para una sombra definida.
3. Usa Expansión para agrandar o encoger la sombra más allá del elemento.
4. Haz clic en "+ Añadir sombra" para superponer varias sombras y obtener efectos más ricos.

Casos de uso

Los diseñadores usan box-shadow para añadir profundidad y elevación en componentes de tarjeta. Las sombras inset crean efectos de botón presionado. Varias sombras superpuestas producen iluminación realista con luz ambiental y luz principal.

Preguntas frecuentes

• ¿Qué es la opción inset? — Las sombras inset aparecen dentro del borde del elemento en lugar de fuera. Son útiles para crear efectos de presionado en entradas y botones.
• ¿Puedo añadir varias sombras? — Sí. Haz clic en "+ Añadir sombra" para añadir otra capa de sombra. Todas se combinan en una declaración box-shadow separada por comas.
• ¿Qué hace un valor de expansión negativo? — Una expansión negativa encoge la sombra más que el elemento. Combinada con desplazamiento y desenfoque, crea una sombra sutil que asoma solo por un lado.