Sombra de Caja
Disena sombras CSS box-shadow con controles visuales para desplazamiento, desenfoque, expansion y color. Copia el codigo CSS y pegalo directamente en tu hoja de estilos.
Caracteristicas principales
- Controles intuitivos de desplazamiento horizontal y vertical
- Deslizadores de radio de difuminado y expansión
- Soporte tanto para sombra interior (inset) como exterior
- Copia del código CSS completo con todo el formato necesario
Guide
La propiedad CSS box-shadow es una de esas que parece simple en la documentación pero se complica en cuanto intentas crear algo específico. ¿Cuánto desenfoque lo hace parecer natural? ¿Qué valor de expansión da un efecto de borde ajustado o un resplandor suave? ¿La sombra debería ir hacia dentro o hacia fuera? Ajustar números a ciegas en tu código y refrescar la página una y otra vez no es la idea de diversión de nadie. El generador de box shadow gratuito de WebRecast te da controles visuales para cada parámetro. Desliza el desplazamiento horizontal y vertical para posicionar tu sombra. Ajusta el radio de desenfoque para suavidad y la expansión para tamaño. Elige cualquier color de sombra, configura su opacidad y alterna entre sombras externas e internas (inset). Ves el resultado actualizarse en vivo mientras arrastras cada control, lo que facilita afinar exactamente el efecto que quieres. Cuando estés contento con el resultado, copia el código CSS completo - correctamente formateado y listo para pegar en tu hoja de estilos. La herramienta también soporta capas de múltiples sombras, que es como se crean esos efectos de profundidad ricos y realistas que ves en diseños de tarjetas modernos. Si has usado la herramienta de box shadow de CSSmatic, Box-Shadow.dev o Neumorphism.io, ya conoces el concepto. Este generador pone todos los controles en una interfaz limpia. Un consejo práctico: para elementos de tarjeta, usa una sombra sutil con unos 10-20px de desenfoque, poca expansión y un negro o gris semitransparente. Levanta la tarjeta de la página sin verse dramática. Para botones, una sombra más pequeña con 4-8px de desenfoque crea una sensación agradable de que se puede hacer clic. Esta herramienta de box shadow online gratuita funciona en tu navegador sin nada que instalar. Diseña tu sombra, copia el CSS, pégalo en tu proyecto. Visual, rápida y totalmente gratuita.
Preguntas frecuentes
¿Puedo superponer varias sombras?
¡Sí! Te permito definir varias capas de sombra y las formateo como una sola cadena CSS.
¿También funciona para text-shadow?
Esta herramienta se centra en box-shadow. Puedes aplicar valores similares a text-shadow en tu CSS.
