Generador de box-shadow CSS
Ajusta desplazamiento, desenfoque, expansión y color con vista previa en vivo.
Generador de box-shadow CSS
Crea una sombra CSS (box-shadow) de forma visual y copia el código. Ajusta el desplazamiento horizontal y vertical, el desenfoque, la expansión, el color y la opción inset, y ve el resultado en vivo en la caja de vista previa.
La sintaxis de box-shadow
box-shadow: [inset] offset-x offset-y blur spread color; — por ejemplo box-shadow: 0 6px 12px 0 #146c43;. Los desplazamientos positivos empujan la sombra a la derecha y abajo; el desenfoque suaviza el borde; la expansión la agranda o reduce; inset dibuja la sombra dentro del elemento.
Preguntas frecuentes
¿Qué hace la expansión (spread)? Un valor positivo hace la sombra mayor que el elemento; uno negativo, menor.
¿Qué es una sombra inset? Dibuja la sombra dentro de la caja, útil para efectos hundidos o pulsados.