Box Shadow Generator
Free online CSS box-shadow generator tool, real-time preview
CSS box-shadow Syntax
The box-shadow CSS property adds shadow effects around an element. Syntax: box-shadow: [inset] offset-x offset-y blur spread color. Multiple shadows can be separated by commas. Use the visual editor to adjust values and see the result in real time.
How to Use the Box Shadow Generator
Adjust the sliders for offset X, offset Y, blur radius, and spread radius. Choose a shadow color and toggle the inset option. The generated CSS code updates in real time and can be copied to your clipboard.
▶What is the difference between blur and spread?
Blur controls how soft the shadow edges are (0 = sharp edge, higher values = softer). Spread expands or contracts the shadow in all directions. Positive spread makes the shadow larger than the element.
▶Can I add multiple shadows?
Yes, CSS supports multiple shadows separated by commas: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);. Combine subtle shadows for a more realistic depth effect.
▶What does inset shadow do?
An inset shadow appears inside the element instead of outside. It creates an impression that the element is pressed inward, like a text field or button depression.
If this tool helped you, consider buying the author a coffee.
Buy Me a Coffee