Online CSS Box Shadow Generator
Adjust shadows in real time and copy the ready CSS rule. Stack multiple shadows on a single element — just like Material Design or Neumorphism.
box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.12);Frequently asked questions
How do I add multiple shadows?
In CSS you can specify multiple shadows separated by commas: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.06). The generator lets you add up to 4 shadows and combine them in any order.
What is an inset shadow?
The inset keyword makes the shadow inner — it appears inside the element rather than outside. Useful for a pressed/recessed effect or inner glow.
How does box-shadow affect performance?
box-shadow is one of the most expensive CSS effects. A large blur radius on many elements can reduce FPS. For animated elements, consider using filter: drop-shadow() instead — it is hardware-accelerated.
Need a full SEO audit?
Tools help with targeted tasks. For systematic growth — request a free review of your site.