Logotipo de OmniKit.tech OmniKit.tech
ES
box-shadow-generator

Generador de sombras CSS Box-Shadow

Generador visual de sombras CSS: sombras multicapa, desenfoque, propagación, vista previa en vivo y exportación a CSS y Tailwind.

Preajustes

Capas de sombra

Desplazamiento X 0px
Desplazamiento Y 4px
Desenfoque 6px
Propagación -1px
Color de sombra
#000000
Opacidad 10%

Vista previa en vivo

Caja
Fondo del lienzo
Color de la caja
Radio 16px
Código CSS
Clase Tailwind CSS

Cómo funciona

1 Ajusta los parámetros de la capa de sombra

Modifica los desplazamientos horizontal y vertical (X/Y), desenfoque (Blur), propagación (Spread), color y opacidad con controles deslizantes.

2 Añade múltiples capas y usa preajustes

Combina varias sombras para lograr profundidad realista con «+ Añadir capa» o elige preajustes de diseño como Soft, Float, Glow o Inset.

3 Copia la regla CSS o la clase Tailwind

Previsualiza tu sombra en tiempo real sobre fondos personalizables y copia la propiedad CSS box-shadow o la clase Tailwind en un clic.

Preguntas frecuentes (FAQ)

¿Por qué usar sombras multicapa en lugar de una sola sombra?
Con iluminación natural, las sombras proyectan difusión ambiental suave junto con bordes de contacto más definidos. Combinar dos o más capas produce una profundidad realista que una sola sombra CSS no puede lograr.
¿Cómo uso la sombra generada en Tailwind CSS?
La herramienta genera automáticamente una clase de valor arbitrario de Tailwind, como class="shadow-[0px_10px_15px_-3px_rgba(0,0,0,0.1)]". Simplemente pégala en el atributo class de tu elemento HTML.
¿Se admiten sombras interiores (inset)?
Sí, puedes activar la casilla Inset en cualquier capa. También puedes combinar sombras externas e interiores en el mismo elemento.

Herramientas relacionadas