Zurück zu den Tools
Box Shadow Generator
FarbeDesign 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);
Dieses Tool teilen:
So verwendest du 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.
Häufig gestellte Fragen
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.