Centro Concetti e Guide
Generatore di Ombre CSS (Box-Shadow) a Più Livelli
Generatore di Ombre CSS (Box-Shadow) a Più Livelli
Questo strumento opera al 100% lato client nel browser. I tuoi codici, token, parametri e dati riservati non vengono mai trasmessi a server remoti.
Architettura di Base e Formula Matematica
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.
Migliori Pratiche e Linee Guida Essenziali
- 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.
Domande Frequenti (FAQ)
What does the Spread Radius do?
The spread radius expands or contracts the physical footprint of the shadow before the blur is applied. A positive spread makes the shadow larger than the element, while a negative spread pulls it inward (great for floating elements).
How do I create an inner shadow?
Append the keyword `inset` to the end of the CSS rule. This reverses the shadow, making it render inside the bounding box, creating an indented, debossed, or 'pressed in' neumorphic effect.
Do box shadows cause performance issues?
Yes. Animating box shadows (like a hover effect) forces the browser to constantly repaint the pixels, which can cause lag on cheap mobile devices. It is often more performant to animate the `opacity` of a pseudo element containing the shadow.