Generador de CSS Box Shadow
Capas de sombra
Se necesita al menos una capa.
Salida CSS
box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.25);Herramientas externas relacionadas
Algunos enlaces son enlaces de afiliados.
Herramientas relacionadas
Diseña una CSS box-shadow de forma visual y copia el código con un clic. Arrastra los controles para ajustar el desplazamiento, el desenfoque, la extensión, el color y la opacidad mientras la vista previa se actualiza al instante. Apila varias capas de sombra, convierte cualquier capa en sombra interna (inset) y parte de presets listos para usar. Todo funciona en tu navegador, sin subir ningún dato.
Cómo usarlo
- Mueve los controles de Desplazamiento X/Y, Desenfoque y Extensión mientras observas la vista previa en vivo.
- Elige el color de la sombra y ajusta su opacidad.
- Añade más capas para dar profundidad o convierte una capa en sombra interior (inset).
- Copia el CSS de box-shadow o cambia a la pestaña Tailwind para obtener un valor de utilidad.
Propiedades de box-shadow
Una CSS box-shadow se escribe como: desplazamiento X, desplazamiento Y, desenfoque, extensión, color, con la palabra clave inset opcional. Puedes listar varias sombras separadas por comas.
Desplazamiento X & Y
El desplazamiento X mueve la sombra horizontalmente y el Y verticalmente. Los valores positivos la desplazan a la derecha y hacia abajo; los negativos, a la izquierda y hacia arriba.
Radio de desenfoque
El desenfoque suaviza los bordes de la sombra. Con 0 obtienes un borde nítido; valores mayores crean una sombra difusa y suave. No puede ser negativo.
Radio de extensión
La extensión amplía (positivo) o reduce (negativo) la sombra antes de aplicar el desenfoque. Un valor ligeramente negativo es ideal para sombras sutiles y ajustadas.
Inset (sombra interior)
La palabra clave inset dibuja la sombra dentro del elemento en lugar de fuera, perfecta para botones presionados, campos de formulario y efectos de profundidad interna.
Color y opacidad
Las sombras suelen verse mejor con un color oscuro semitransparente en lugar de negro sólido. Reduce la opacidad para un efecto más natural y realista.
Funciones
Múltiples capas de sombra
Apila varias sombras en un mismo elemento. Combinar una sombra oscura y ajustada con una más amplia y suave es la clave para lograr profundidad realista y refinada.
Sombras interiores
Activa la opción inset en cualquier capa para crear efectos de presión, tallado o hundimiento, perfectos para botones y campos de formulario.
Presets listos para usar
Comienza con elevaciones de Material, sombras suaves o duras, neumorphism o un resplandor de color, y luego ajusta a tu gusto.
Vista previa clara y oscura
Cambia el fondo de la vista previa entre claro y oscuro para comprobar cómo se ve la sombra sobre distintas superficies.
Copia con un clic (CSS o Tailwind)
Copia una declaración box-shadow lista para pegar o usa el valor arbitrario de Tailwind como shadow-[…] para proyectos utility-first.
Casos de uso habituales
Tarjetas y contenedores
Dale a las tarjetas una ligera elevación con una sombra suave y de baja opacidad para que el contenido se perciba agrupado y elevado.
Botones y estados hover
Añade una sombra sutil a los botones, una mayor al pasar el cursor o una sombra interna para simular que el botón se pulsa.
Neumorphism
Combina una sombra clara y una oscura en lados opuestos para conseguir el aspecto neumórfico, suave y extruido.
Resplandor y anillos de foco
Usa una sombra de color con desplazamiento cero y algo de extensión para crear un resplandor o un resaltado de foco accesible.
Notas y consejos
- Muchas sombras grandes y desenfocadas pueden afectar al rendimiento del renderizado; úsalas con moderación en elementos animados o con scroll.
- Los valores de desenfoque muy grandes son los más costosos de pintar; prefiere apilar sombras más pequeñas para mayor realismo.
- Mantén suficiente contraste para que las sombras sean sutiles y no dificulten la legibilidad.
- Las sombras inset se dibujan dentro del elemento y no sobrepasan su caja de borde.
Preguntas frecuentes
- ¿Cuál es la diferencia entre box-shadow y filter: drop-shadow?
- box-shadow sigue la caja de borde rectangular del elemento (respetando border-radius), mientras que drop-shadow sigue la forma real, incluidos los PNG transparentes y las formas irregulares. Esta herramienta genera box-shadow.
- ¿Puedo añadir varias sombras a un mismo elemento?
- Sí. CSS permite listar varias sombras separadas por comas, y este generador te permite apilar múltiples capas. Combinar sombras es la clave para lograr una profundidad realista.
- ¿Qué es una sombra inset?
- Una sombra inset se dibuja dentro del elemento en lugar de fuera. Es útil para botones presionados, campos de formulario y superficies hundidas. Activa la opción Inset en cualquier capa.
- ¿Las box-shadow ralentizan mi página?
- Unas pocas sombras estáticas no son problema. Las sombras grandes y muy desenfocadas tienen mayor coste de renderizado, así que úsalas con cuidado en elementos animados o que se repintan con frecuencia.
- ¿Se suben mis datos a algún servidor?
- No. El generador funciona íntegramente en tu navegador. No se envía nada a ningún servidor y no es necesario registrarse.