Generador de box-shadow CSS — Con vista previa
Ajusta un box-shadow CSS para tarjetas, botones y otros elementos de interfaz
Funciona en tu navegador · no se sube nada
Los desplazamientos horizontal y vertical positivos mueven la sombra a la derecha y hacia abajo. Una extensión negativa encoge la sombra.
CSS de la sombra generado.
Cómo se usa
- Elige el desplazamiento horizontal y vertical para colocar la sombra.
- Ajusta el desenfoque y la extensión para controlar su suavidad y tamaño.
- Selecciona un color y una opacidad. Activa inset para una sombra dentro del elemento.
- Revisa la vista previa en vivo y copia la declaración
box-shadowgenerada.
Qué significa cada valor
Un desplazamiento horizontal positivo mueve la sombra a la derecha y uno negativo, a la izquierda. Los desplazamientos verticales positivos la mueven hacia abajo y los negativos, hacia arriba. El desenfoque debe ser cero o mayor; cuanto más alto, más suave es el borde. Una extensión positiva agranda la forma de la sombra y una negativa la encoge.
Los colores se escriben como canales RGB con un valor alfa. Por ejemplo, una opacidad del 25 % se convierte en rgba(0, 0, 0, 0.25). Si activas la opción inset, se coloca inset al principio del valor de la sombra.
Ejemplo
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.25); crea una sombra negra suave desplazada ocho píxeles hacia abajo. Un desplazamiento horizontal de cero la mantiene equilibrada de izquierda a derecha.
Para que una sombra se vea más ceñida, compara una extensión negativa con un desenfoque menor: cada uno cambia una parte distinta del efecto. En las sombras inset, revisa el resultado con el tamaño final del componente, porque el espacio interior disponible cambia cuánta sombra se ve.
Límites y aplicación
Los desplazamientos y la extensión van de -100 a 100 píxeles. El desenfoque va de 0 a 200 píxeles y la opacidad, de 0 a 100 %. Este generador crea una sola sombra; para efectos en capas tendrás que editar el CSS copiado y añadir más valores separados por comas.
La vista previa usa una caja de tamaño fijo. Las dimensiones reales de tu elemento, su radio de esquina, su fondo y las reglas de overflow de sus antecesores pueden alterar el aspecto. Una sombra no ocupa espacio en el diseño, así que deja margen suficiente alrededor del componente final cuando el efecto sobresalga de su borde.
Preguntas frecuentes
¿En qué se diferencian el desenfoque y la extensión?
El desenfoque suaviza los bordes de la sombra. La extensión agranda o encoge su forma antes de aplicar el desenfoque. Un valor de extensión negativo hace la sombra más pequeña.
¿Qué hace inset?
Inset dibuja la sombra dentro de la caja en lugar de fuera. Sirve para crear campos hundidos o efectos de botón pulsado.
¿Por qué se corta la sombra en mi página?
Los ajustes de overflow de un elemento antecesor o la falta de espacio pueden recortar la sombra. La vista previa también recorta las partes de sombras muy grandes que salen de su marco.
¿Puedo crear varias sombras superpuestas?
Este generador crea una sola sombra. Para superponer varias, añade más valores separados por comas al CSS copiado.
