टूल्स पर वापस जाएँ
CSS Box Shadow Generator
डेवलपरVisually construct CSS layer shadows and generate cross-browser code.
ttb run box-shadow-generator
Shadow Properties
Horizontal Offset (px)10 / 100
Vertical Offset (px)10 / 100
Blur Radius (px)15 / 100
Spread Radius (px)-3 / 100
Opacity (%)20 / 100
Live Preview
Box
CSS Output
box-shadow: 10px 10px 15px -3px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 10px 10px 15px -3px rgba(0, 0, 0, 0.2); -moz-box-shadow: 10px 10px 15px -3px rgba(0, 0, 0, 0.2);
इस टूल को शेयर करें:
CSS Box Shadow Generator का उपयोग कैसे करें
Adjust the sliders for horizontal offset, vertical offset, blur radius, spread radius, and shadow color. The live preview updates in real-time as you tweak values. Layer multiple shadows for complex depth effects. Copy the generated CSS code and paste it directly into your stylesheet.
1
Enter your parameters
Configure the inputs for the Box 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 spread radius?+
Spread radius expands or contracts the shadow. Positive values make the shadow larger than the element, negative values make it smaller. A spread of 0 makes the shadow the same size as the element.
Can I add multiple shadows?+
Yes! CSS supports comma-separated multiple box shadows. Layering a tight, dark shadow with a wide, soft one creates realistic, material-design-style depth effects.