CSS Box Shadow Generator
Adjust the shadow with sliders and copy the box-shadow code right away
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
This tool lets you design a shadow with a live preview while adjusting offset, blur, spread, color, opacity, and inset with sliders. You can copy the finished box-shadow CSS right away, making it handy for web designers and front-end developers building card and button shadows quickly.
How to use
- Use the sliders to adjust the horizontal and vertical offset, blur, spread, and opacity.
- Pick the shadow color, and turn on inset (inner shadow) if needed.
- Check the result in the preview box.
- Copy the generated box-shadow code and use it.
FAQ
- What is inset?
- Turning on inset makes the shadow go inward rather than outside the element, creating a pressed-in, recessed effect. It's often used for input fields and pressed buttons.
- Can I layer multiple shadows?
- This tool creates a single shadow. If you need several, join the generated values with commas and add them to box-shadow as multiple layers.
- Are the values I enter stored on a server?
- No. The preview and CSS generation are all processed within your browser, and no values are ever sent to a server.