Español
Diseña box-shadow CSS multicapa con vista previa en vivo y copia CSS listo para producción.
Última actualización
box-shadow:
0px 8px 24px 0px rgba(0, 0, 0, 0.18);box-shadow es la propiedad de CSS que añade sombras, brillos y huecos interiores a cualquier elemento. Es la palanca más potente para darle *elevación* a un diseño plano - las tarjetas se despegan de la página, los modales flotan, los botones parecen pulsables.
El truco es que una sombra *buena* casi nunca es una sola capa. Las sombras reales son más suaves y tienen rebote ambiental - la mayoría de sistemas de diseño (Material, iOS, Tailwind) apilan 2 o 3 declaraciones box-shadow con distintos offsets y opacidades. Escribirlas a mano es engorroso; un generador te deja afinar cada capa visualmente y ver el resultado combinado en directo.
El generador de Coddy admite capas ilimitadas, sombras *exteriores* e *inset*, color y opacidad por capa y presets para los patrones más comunes: tarjetas sutiles, sombras nítidas, brillos de marca, huecos inset y superficies neumórficas. Copia el CSS y pégalo en tu hoja de estilos - sin subida, sin cuenta, sin marca de agua.
box-shadow: [inset] <x> <y> <blur> <spread> <color>. inset mete la sombra *dentro* del elemento; sin él cae fuera.Elige un preset que se acerque a la sensación que buscas - tarjeta sutil, elevación suave, drop nítido, brillo de marca, hueco inset o neumórfico. Son buenos puntos de partida que luego puedes afinar.
Mueve los sliders de X/Y, blur, spread, color y opacidad. La vista previa se actualiza al instante. Menor opacidad y mayor blur leen como sombras más *suaves*.
Pulsa *Añadir capa* para apilar una segunda sombra. La profundidad real casi siempre usa dos capas: una corta y cerrada (sombra de contacto) y otra larga y suave (sombra ambiental).
Activar *Inset* pinta la sombra dentro del elemento. Combínala con una sombra exterior sutil para un efecto de botón pulsado.
Cuando la vista previa coincida con tu diseño, pulsa *Copiar CSS*. Pega el resultado en tu hoja de estilos - la regla generada incluye todas las capas activas.
Cada valor en box-shadow: x y blur spread color y el papel que juega.
| Valor | Efecto | Rango típico |
|---|---|---|
| X offset | Desplaza la sombra horizontal; positivo = derecha | −40px a 40px |
| Y offset | Desplaza la sombra vertical; positivo = abajo | 0 a 40px para luz natural |
| Blur | Suaviza el borde de la sombra | 0 a 80px |
| Spread | Engorda o adelgaza antes del blur | −30 a 30px |
| Color | Cualquier color CSS; rgba() te deja afinar opacidad por capa | rgba(0,0,0,0.05–0.3) para sombras naturales |
inset | Pinta la sombra dentro del elemento | - |
| Varias capas | Separadas por coma; se apilan de atrás hacia delante | 2–3 capas dan profundidad realista |
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08);Una sombra corta y cerrada marca el punto de contacto, y una más larga y suave da la sensación de luz ambiental. Es el patrón que usan la mayoría de sistemas de diseño modernos.
box-shadow: 0 0 24px 4px rgba(108, 140, 255, 0.45);Pon X e Y a cero para que el brillo se irradie uniformemente. Un spread positivo pequeño engorda el brillo antes de que el blur lo suavice. Úsalo con moderación - los glows de color llaman mucho la atención.
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.06);Las sombras inset pintan dentro del elemento. Una sombra suave da la sensación de un hueco hundido; un inset de un píxel añade un borde interior sutil para definirlo.
box-shadow?box-shadow: x y blur spread color. Los dos primeros son offsets; *blur* suaviza el borde; *spread* cambia el tamaño antes del blur; el color es cualquier color CSS (usa rgba() para opacidad). Añade inset al principio para ponerla dentro del elemento.box-shadow y filter: drop-shadow()?box-shadow sigue el rectángulo del elemento y es rápida de pintar. drop-shadow() sigue el canal alpha de a lo que se aplica (perfecta para SVG y PNG con transparencia) pero cuesta más renderizar. Usa box-shadow para tarjetas y botones; drop-shadow() para formas irregulares.transform: scale() en algún ancestro.box-shadow afecta al layout?overflow: visible.