返回工具列表
Box Shadow Generator
颜色Design CSS box shadows with a visual editor and live preview.
ttb run shadow-generator
X Offset0px
Y Offset10px
Blur30px
Spread0px
Opacity40%
box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.4);
分享此工具：
如何使用 Box Shadow Generator
Adjust the sliders for X offset, Y offset, blur, spread, and color to construct your perfect shadow. Choose between box-shadow (for elements) and text-shadow (for typography). Layer multiple shadows for depth. The live preview shows changes in real-time. Copy the CSS with a single click.
1
Enter your parameters
Configure the inputs for the Shadow Generator according to your specific needs.
2
View real-time results
The utility instantly processes your request and displays the calculated outputs directly in your browser.
3
Copy or Download
Click the copy icon next to the final output to instantly grab the result, or export it if applicable.
常见问题
What is the difference between box-shadow and text-shadow?+
box-shadow applies a shadow behind an element's entire box (including background). text-shadow applies a shadow behind the text characters only. box-shadow supports spread radius and inset; text-shadow does not.
How do I create a Material Design elevation?+
Material Design uses multiple layered shadows: a dark, tight shadow for the key light and a softer, wider shadow for ambient light. Use two box-shadows separated by a comma - this creates a realistic depth effect.