CSS Box Shadow Generator
Generate CSS box-shadow visually with live preview.
Horizontal (X)4px
Vertical (Y)4px
Blur radius10px
Spread radius0px
Opacity25%
Color
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25);
Visual CSS box-shadow builder
Adjust sliders to design the perfect shadow — from subtle material-design elevation to neon glows and neumorphism effects — then copy the CSS directly into your project.
Frequently asked questions
- What are the box-shadow parameters?
- box-shadow takes: horizontal offset (X), vertical offset (Y), blur radius, spread radius, and color. A negative X moves the shadow left; negative Y moves it up. Spread expands or contracts the shadow size.
- What does 'inset' do?
- The inset keyword moves the shadow to the inside of the element (inner shadow) instead of outside. This is useful for creating pressed-button effects or inner glows.
- Can I add multiple box shadows?
- Yes. Click '+ Add' to add another shadow layer. CSS supports comma-separated multiple shadows, with the first shadow drawn on top. Each shadow has its own independent settings.
- How do I use the generated CSS?
- Click 'Copy' and paste the box-shadow property into your CSS file or style attribute. The output is valid CSS3 that works in all modern browsers.
Related tools
- JSON Formatter
Format, beautify, minify, and validate JSON in your browser
- QR Code Generator
Generate QR codes for URLs, text, Wi-Fi, and more. Download as PNG.
- Password Generator
Generate strong, random passwords with custom length and character sets.
- Base64 Encoder / Decoder
Encode text to Base64 or decode Base64 back to plain text.
- URL Encoder / Decoder
Encode or decode URLs and query strings with percent-encoding.