๐ CSS Box Shadow Generator
CSS
box-shadow: 4px 4px 12px 0px rgba(26, 58, 92, 0.35);
Adjust the horizontal and vertical offset, blur radius, spread radius, color, and opacity with sliders to generate box-shadow CSS code, with a live preview. Supports inset (inner) shadows too. Handy for designing card UIs or buttons.
How to use
- Use the sliders to adjust the horizontal offset, vertical offset, blur, and spread.
- Choose a color and opacity, and check "Inset shadow" if needed.
- Adjust while watching the preview, then use "Copy" to copy the generated CSS code.
FAQ
Can I layer multiple shadows?
No, the current version only generates a single shadow. If you need multiple shadows, manually combine generated code with commas.
What does "spread radius" do?
It expands or shrinks the size of the shadow โ a positive value makes the shadow bigger, a negative value makes it smaller.
What does "inset shadow" mean?
Adding the inset keyword makes the shadow appear inside the element instead of outside it, useful for creating a recessed/pressed-in look.