All tools
Design & CSS
CSS Box Shadow Generator
Drag the shadow settings and copy the CSS with a live preview.
Everything runs in your browser. Your data is never sent to a server.
CSS
box-shadow: 0px 10px 24px -4px rgba(30, 34, 56, 0.25);
What does the Box Shadow tool do?
box-shadow is the CSS property that adds a shadow around an element; it's made of horizontal and vertical offset, blur, spread and colour. This tool lets you change those values with sliders and see the result immediately.
What is it for?
- Designing soft shadows that give cards depth
- Creating a clear ring for keyboard focus
Related tools
Want to talk about a project with the person who built these tools?
Get in touch