Crea box-shadow CSS con controles deslizantes y vista previa en elemento en vivo
Un generador de box-shadow te deja diseñar una sombra CSS con controles deslizantes y una vista previa en vivo, y luego copiar el valor exacto de box-shadow a tu hoja de estilos. Las sombras CSS se controlan con un puñado de números — desplazamiento horizontal y vertical, radio de desenfoque, expansión y un color — y la relación entre ellos es difícil de imaginar solo desde el código. Arrastrar un control y ver la sombra cambiar en un elemento de muestra es mucho más rápido que editar números a ciegas y recargar para ver el resultado.
Las buenas sombras son lo que da a una interfaz plana sensación de profundidad y jerarquía: una sombra sutil y suave eleva una tarjeta de la página, mientras que una más apretada y oscura sugiere un botón que puedes pulsar. El truco que la mayoría pasa por alto es que la profundidad realista viene de sombras suaves y de baja opacidad en vez de negras y pesadas — y el generador facilita afinar esa suavidad a ojo. También admite sombras interiores (inset) para profundidad hacia dentro. Esta herramienta produce CSS basado en estándares en tu navegador, listo para pegar en botones, tarjetas, modales e inputs.
En orden son: desplazamiento horizontal, desplazamiento vertical, radio de desenfoque, radio de expansión y color. Los desplazamientos mueven la sombra, el desenfoque suaviza su borde, la expansión la agranda o reduce, y el color (normalmente con baja opacidad) fija su intensidad. Una palabra clave opcional "inset" dibuja la sombra dentro del elemento.
Usa un desenfoque suave y un color de baja opacidad en vez de negro sólido, y mantén el desplazamiento vertical mayor que el horizontal para imitar la luz desde arriba. Las sombras sutiles y suaves se leen como profundidad natural; las oscuras y pesadas parecen artificiales.
Añadir la palabra clave inset dibuja la sombra dentro del elemento en vez de fuera, creando un aspecto interior y hundido — útil para botones pulsados, campos de entrada o efectos tallados. Se aplican los mismos valores de desplazamiento, desenfoque y expansión, solo que hacia dentro.
Sí. CSS te deja apilar varias box-shadow en un elemento separándolas con comas, que es como se construye a menudo la profundidad realista — combinando una sombra apretada y oscura con otra más ancha y suave. El valor generado puede contener varias capas.
Generador de radio de borde CSS · Generador de Flexbox · Generador de CSS Grid · Generador de sombra de texto CSS · Generador de animaciones CSS · Generador de filtros CSS