Centro de Conocimiento y Guía
Generador de Box-Shadow CSS, Profundidad y Diseño de Capas
Generador de Box-Shadow CSS, Profundidad y Diseño de Capas
Esta herramienta funciona 100% del lado del cliente en su navegador. Su código, tokens, claves API y datos confidenciales nunca se envían a servidores externos, garantizando privacidad absoluta.
Fórmula y Método de Cálculo
box-shadow: [X-Offset] [Y-Offset] [Blur-Radius] [Spread-Radius] [Color] [Inset]
You can stack multiple shadows on a single element by separating them with commas, which is essential for creating hyper realistic, diffuse ambient lighting.
Mejores Prácticas y Consejos
- Layer Multiple Subtle Shadows: A single harsh black shadow looks cheap and dated. Professional UI design uses a tight, dark shadow for immediate depth, combined with a large, highly transparent shadow for ambient light dispersion.
- Use RGBA for Transparency: Never use solid hex colors for shadows. Always use RGBA or HSLA with a very low alpha channel (e.g., 0.05 to 0.15) so the shadow realistically blends with whatever background color sits behind it.
- Match Real World Lighting: In the real world, light usually comes from above. Therefore, your Y Offset should almost always be positive (pushing the shadow down), while the X Offset remains close to zero.
Preguntas Frecuentes
¿Qué hace el radio de propagación?
El radio de propagación expande o contrae el área física de la sombra antes de aplicar el desenfoque. Una propagación positiva hace que la sombra sea más grande que el elemento, mientras que una propagación negativa la retrae hacia adentro (ideal para elementos flotantes).
¿Cómo creo una sombra interior?
Añada la palabra clave `inset` al final de la regla CSS. Esto invierte la sombra, haciendo que se renderice dentro del cuadro delimitador, creando un efecto indentado, grabado o hundido.
¿Las sombras de caja causan problemas de rendimiento?
Sí. Animar las sombras de caja (como un efecto al pasar el cursor) obliga al navegador a repintar constantemente los píxeles, lo que puede provocar lag en dispositivos móviles lentos. A menudo es más eficiente animar la propiedad `opacity` de un pseudoelemento que contenga la sombra.