Generador de box-shadow CSS
Diseña sombras realistas combinando varias capas, como hacen los mejores sistemas de diseño. Ajusta desplazamiento, desenfoque, expansión, color y opacidad de cada capa y copia el resultado en CSS o como clase de Tailwind.
Procesado 100% en tu navegador
Ctrl + Enter ejecutarCtrl + C copiar resultado
Cómo usar
- 1Empieza desde un estilo (suave, elevación, flotante…) o desde cero.
- 2Selecciona una capa y ajusta desplazamiento, desenfoque, expansión, color y opacidad.
- 3Añade capas con «+» para sombras más naturales, o marca «inset» para sombras interiores.
- 4Cambia el color de la caja, el fondo y el radio, y copia el CSS o la clase de Tailwind.
Casos de uso
- Tarjetas, menús desplegables y modales con profundidad realista.
- Estados hover y de elevación en botones.
- Estilos brutalistas con sombras duras o efectos de resplandor.
- Campos de formulario con sombra interior.
Preguntas frecuentes
¿Cómo funciona la propiedad box-shadow?
Recibe desplazamiento horizontal y vertical, desenfoque, expansión y color, y opcionalmente la palabra inset. Puedes encadenar varias sombras separadas por comas; la primera se dibuja encima.
¿Por qué usar varias capas?
Las sombras reales tienen una zona nítida cerca del objeto y otra difusa más lejos. Superponer capas con distinto desenfoque y poca opacidad imita ese comportamiento y da un acabado mucho más natural.
¿Qué hace el valor de expansión (spread)?
Agranda (valores positivos) o encoge (negativos) la sombra antes de desenfocarla. Un spread negativo con mucho desenfoque crea sombras suaves que no asoman por los lados.
¿Cómo la uso en Tailwind CSS?
Elige la pestaña Tailwind y copia la clase con valor arbitrario, por ejemplo shadow-[0px_10px_30px_-5px_rgba(0,0,0,0.2)]. Funciona en Tailwind v3 y v4 sin configuración extra.