¿Qué es el generador de sombras CSS?
El generador de sombras CSS es una herramienta visual de CSS que te permite diseñar sombras de caja sin escribir código a mano. Ajusta desplazamientos, desenfoque, expansión y color con deslizadores intuitivos y ve el resultado al instante. La herramienta admite varias capas de sombra y sombras inset, cubriendo todos los patrones de sombra habituales en diseño web.
Cómo usar el generador de sombras CSS
Empieza con la sombra predeterminada y usa los deslizadores para ajustarla a tu gusto. El cuadro de vista previa se actualiza en tiempo real para que veas exactamente cómo queda la sombra.
- Arrastra el deslizador de desplazamiento X para mover la sombra a la izquierda o a la derecha.
- Arrastra el deslizador de desplazamiento Y para mover la sombra hacia arriba o hacia abajo.
- Ajusta el deslizador de desenfoque para controlar la suavidad de los bordes de la sombra.
- Ajusta el deslizador de expansión para agrandar o reducir el tamaño de la sombra.
- Elige un color de sombra con el selector de color o introduce un valor hex.
- Marca la opción Inset para colocar la sombra dentro del elemento.
Para añadir una segunda capa de sombra, haz clic en "+ Añadir" y configúrala por separado. Puedes tener tantas capas de sombra como necesites. Haz clic en el icono X de la pestaña de una sombra para eliminarla.
Consejos para sombras eficaces
Las sombras sutiles crean profundidad sin sobrecargar el diseño. Para elevar tarjetas, usa un desplazamiento Y pequeño con desenfoque moderado y negro de baja opacidad. Para efectos dramáticos, aumenta el desenfoque y el desplazamiento. Superponer dos o tres sombras de distintos tamaños suele producir una profundidad más realista que una sola sombra pesada.
Las sombras inset son útiles para crear estados de botones pulsados, anillos de enfoque en campos de entrada y patrones de diseño neomórfico. Combina una sombra inset con una sombra exterior para lograr una apariencia pulida y tridimensional.
Casos de uso habituales
- Elevación de tarjetas y paneles en diseños de dashboard.
- Estados hover y activos de botones con sombras superpuestas.
- Efectos de enfoque en campos de entrada usando sombras inset.
- Efectos de profundidad en modales y ventanas emergentes.
- Diseño de UI neomórfico con sombras inset y exteriores combinadas.
¿Por qué usar un generador de sombras?
La propiedad CSS box-shadow tiene cinco valores que coordinar: desplazamiento X, desplazamiento Y, desenfoque, expansión y color. Ajustarlos a mano requiere recargar el navegador constantemente. Este generador te permite experimentar visualmente y copiar código CSS limpio cuando estés satisfecho, ahorrando tiempo y reduciendo las conjeturas.