🔲 CSS बॉक्स शैडो जेनरेटर — विज़ुअल शैडो बिल्डर

Build CSS box-shadow values visually. Control X/Y offset, blur, spread, color, and inset. Stack multiple shadow layers. Live preview. Copy CSS instantly.

Stop guessing box-shadow values. Drag the sliders for X offset, Y offset, blur, and spread — and see the shadow update live on a preview card. Stack multiple shadow layers for Material Design-style depth. Copy the complete CSS declaration with one click.

X Offset4px

Y Offset4px

Blur12px

Spread0px

Opacity40%

Color Inset

Preview

How to Use

Adjust the sliders

Set X offset, Y offset, blur, and spread with the sliders. Toggle Inset for an inner shadow.

Pick a color

Click the color swatch to open the color picker. Adjust opacity for semi-transparent shadows.

Stack layers and copy

Add multiple shadow layers for depth. Click Copy CSS to get the complete box-shadow declaration.

Frequently Asked Questions

What are the box-shadow values? +

box-shadow takes: horizontal-offset vertical-offset blur-radius spread-radius color. Positive horizontal moves right, positive vertical moves down. Blur softens the shadow. Spread expands it. The optional inset keyword makes it an inner shadow.

What does "inset" do in box-shadow? +

The inset keyword turns the shadow from an outer drop shadow into an inner shadow that appears inside the element. Inner shadows are useful for creating pressed/sunken button effects, input field depth, and embossed designs.

Can I add multiple shadow layers? +

Yes — CSS box-shadow accepts multiple comma-separated values. Each layer adds depth. Stacking a tight hard shadow with a larger soft shadow creates realistic elevation effects like Material Design cards.

What is the difference between blur and spread? +

Blur determines how soft/fuzzy the shadow edges are (0 = hard sharp edge). Spread expands or contracts the shadow before blurring — positive spread makes the shadow larger than the element, negative shrinks it.

How do I copy the CSS to my project? +

Click the Copy CSS button to copy the full box-shadow declaration to your clipboard. The output is ready to paste directly into your stylesheet.

संपूर्ण गाइड: CSS Box Shadow Generator

CSS Box Shadow Generator क्या है?

CSS Box Shadow Generator visual sliders से complex box-shadow CSS property generate करता है। Box shadows elements को depth और dimension देते हैं। CSS syntax: box-shadow: offset-x offset-y blur-radius spread-radius color. Multiple shadows comma-separated किए जा सकते हैं।

Material Design, Tailwind CSS, और modern UI frameworks सभी layered box shadows use करते हैं realistic elevation effects के लिए। Manual CSS tweaking hit-and-trial process है — visual generator workflow को dramatically speed up करता है।

कैसे उपयोग करें

Sliders adjust करें: X offset, Y offset, blur, spread।
Color pick करें shadow के लिए।
Inset toggle करें inner shadow effect के लिए।
Multiple shadows add करें layered effect के लिए।
CSS code copy करें generated output से।

Pro Tips

Realistic shadows के लिए slightly colored shadows use करें (pure black नहीं)।
Multiple subtle shadows stack करें single heavy shadow की जगह — ज्यादा natural लगता है।
Dark mode के लिए shadow opacity reduce करें या hue adjust करें।