Generador de box-shadow CSS
Crea sombras CSS (box-shadow) con vista previa en vivo: desplazamiento, desenfoque, expansión, color, opacidad, varias capas y plantillas listas.
Cómo usarGenerador de sombra CSS
Disponible en: 
Generador de box-shadow CSS: para qué sirve
Ajusta el desplazamiento, el desenfoque, la expansión, el color y la opacidad de la sombra y mira el resultado al instante. Combina varias capas para lograr sombras realistas y usa la opción interna (inset).
Tiene plantillas listas como suave en capas, Material, flotante, contorno, neumorfismo y neón. El código CSS queda listo para copiar, ya con el border-radius.
Cómo usar
- Elige una plantilla o empieza desde cero.
- Ajusta las capas y los colores.
- Copia el CSS.
Cuándo usar
- Dar profundidad a tarjetas y botones.
- Crear efectos de neumorfismo y neón.
- Aprender cómo funciona el box-shadow.
Preguntas frecuentes
¿Cómo hacer una sombra suave y realista?
Usa varias capas con poca opacidad: una corta y nítida y otra larga y desenfocada. La plantilla 'Suave en capas' ya lo hace.
¿Qué es la sombra interna (inset)?
Es la sombra que se dibuja dentro del elemento, dando la impresión de que está hundido. Marca la opción 'Interna' en la capa.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas y funcionan directo en tu navegador.