Box shadows add depth to UI elements by simulating lighting and elevation. Well-designed shadows create visual hierarchy and make interfaces feel more tactile.
Adjust horizontal offset, vertical offset, blur, spread, color, and opacity. The Canvas preview updates in real time. Copy the CSS code when satisfied.
Frequently Asked Questions
Q: What is the difference between blur and spread?
What is the difference between blur and spread? Blur controls how soft the shadow edge is. Spread controls how much the shadow expands.
Q: How many shadow layers should I use?
How many shadow layers should I use? 1-2 layers is usually enough. Use inset shadows for inner depth.
Q: How many box-shadow layers should I use?
How many box-shadow layers should I use? Professional designs often use 2-4 layers for depth. Start with a small tight shadow, add a medium spread shadow, and optionally add a large ambient shadow. The tool supports unlimited layers.
Q: What is the performance impact of box-shadow?
What is the performance impact of box-shadow? A few box-shadows have negligible impact. Too many blur-heavy shadows can affect scroll performance on low-end devices. The tool shows a real-time preview so you can judge before copying.
Q: Can I create inner shadows (inset)?
Can I create inner shadows (inset)? The current version focuses on outer shadows. For inner shadows, manually add the "inset" keyword to the beginning of the generated CSS box-shadow value.