Cómo usar: Generador de Box Shadow
- Elige Sombra de caja o Sombra de texto y parte de un preajuste como Layered (realista) o Neumorfismo.
- Selecciona una capa y ajusta el desplazamiento X/Y, el desenfoque, la expansión, el color, la opacidad y el inset con los deslizadores o los campos numéricos.
- Añade, duplica o elimina capas. Apilar varias sombras suaves da la profundidad más natural.
- Cambia el fondo de la vista previa, el color de la tarjeta y el radio para que encajen con tu diseño, y luego haz clic en Copiar CSS.
¿Qué es la propiedad CSS box-shadow?
box-shadow dibuja una o más sombras alrededor (o dentro) del cuadro de borde de un elemento. Cada sombra se escribe como [inset] <x> <y> [blur] [spread] <color>, y las sombras múltiples se separan con comas. La primera es la que queda encima. Las sombras siguen a border-radius, no afectan al layout y no generan barras de desplazamiento.
| Valor | Qué hace |
|---|---|
| Desplazamiento X / Y | Mueve la sombra a la derecha o hacia abajo (los valores negativos la mueven a la izquierda o hacia arriba). |
| Blur (desenfoque) | Suaviza el borde; 0 da una sombra nítida. No puede ser negativo. |
| Spread (expansión) | Agranda (positivo) o encoge (negativo) la sombra antes de desenfocarla. |
| Color | Normalmente un color oscuro con poca opacidad, por ejemplo rgba(15, 23, 42, 0.08). |
| inset | Dibuja la sombra dentro de la caja, útil para botones presionados y huecos. |
Sombras realistas en capas
Los objetos reales proyectan una sombra de contacto nítida y otra ambiental, amplia y suave. Una sola sombra grande se ve plana. Varias capas con desplazamientos y desenfoques que se duplican (1px, 2px, 4px, 8px, 16px…) y con poca opacidad se ven naturales. Prueba el preajuste Layered. Una expansión negativa en una capa grande y desenfocada (Elevated card) mantiene la sombra debajo de la tarjeta en lugar de salirse por los lados. Para un resultado más limpio, tiñe el color de la sombra con el tono de tu fondo en vez de usar negro puro.
Neumorfismo, brillos y anillos de foco
El neumorfismo combina una sombra clara (arriba a la izquierda) y una oscura (abajo a la derecha) en un elemento del mismo color que su fondo. Se ve suave, pero tiene muy poco contraste, así que no confíes solo en él para mostrar botones o estados. Una sombra sin desenfoque y con expansión positiva sirve como anillo de foco que sigue a border-radius: 0 0 0 2px #fff, 0 0 0 4px #4f46e5.
text-shadow
text-shadow usa la misma sintaxis, pero sin spread ni inset. Úsala con moderación para mejorar la legibilidad sobre imágenes, o apila capas para efectos de neón, contorno o 3D retro (consulta los preajustes de Sombra de texto). Evita sombras en el texto de lectura, porque reducen la nitidez.
Rendimiento y consejos para Webflow
Las sombras grandes y desenfocadas se muestran sin problemas, pero son costosas de animar. En lugar de hacer transición de box-shadow al pasar el ratón, coloca la sombra de hover en un pseudoelemento ::after y anima su opacity. En Webflow, añade cada capa en el panel Style, en Effects → Box shadows (elige Outside o Inside). La tabla bajo la salida CSS muestra los valores de cada capa, y la expansión aparece como Size, igual que en Webflow. Combina las sombras con un fondo del Generador de gradientes CSS.
También se busca como: generador box shadow, box-shadow css, sombra css, text-shadow, sombra drop shadow, neumorfismo css, sombra en capas, sombra interior inset.
Herramientas que combinan con: Generador de Box Shadow
- Generador de Botones CSS — Diseña un botón que se vea bien en todos los estados.
- Conversor de colores — Pega cualquier color CSS —HEX, rgb(), hsl(), hwb(), oklch() o un nombre como tomato— y obtén al instante todos los demás formatos, además de una paleta 50–950 lista para usar.
- Calculadora de abrazaderas — Introduce un tamaño mínimo y máximo y el rango de la ventana de visualización: obtendrás un valor fácil de ajustar con el zoom clamp() con una explicación de los cálculos, una vista previa en directo y una escala completa y fluida de tipo o espacio.
- Minificador CSS — Pega una hoja de estilos para reducirla al instante.
Preguntas frecuentes
¿Cuál es la diferencia entre blur y spread en box-shadow?
¿Cómo añado una sombra solo en un lado?
0 8px 6px -6px rgba(0,0,0,.3) genera una sombra solo en la parte inferior.¿Es mejor box-shadow o filter: drop-shadow()?
box-shadow sigue la caja y el radio del elemento, y admite spread e inset. filter: drop-shadow() sigue la forma visible real, incluidos los PNG y SVG transparentes, pero no tiene spread ni inset y puede ser más pesado de renderizar.