Advanced CSS Box-Shadow Generator
Creating the perfect CSS `box-shadow` is notoriously difficult when writing code by hand. A great shadow distinguishes premium, modern UI from flat, uninspired design. Our interactive Box-Shadow Generator allows you to visually tweak the X/Y offsets, blur radius, spread, and opacity to craft the perfect drop shadow or inset shadow. Instantly grab the browser-prefixed CSS for your Next.js, React, or standard HTML projects.
100% Private & Secure
This tool runs completely inside your browser using client-side WebAssembly and JS. Zero data is ever sent to our servers.
Shadow Settings
How to use this tool
- Adjust the X and Y Offsets to dictate where the light source is coming from.
- Increase the Blur Radius to make the shadow softer and more diffuse, or decrease it for a hard, pixel-art style drop.
- Use the Spread Radius to make the shadow larger (positive) or smaller (negative) than the base element.
- Toggle the 'Inset' switch to push the shadow inside the box, creating a carved-out, debossed effect.
- Change the Background and Box colors in the preview area to ensure your shadow looks good in context.
- Click any Preset (like 'Neumorph') for a one-click foundational style, then tweak to perfection.
Example Usage
Soft Modern Elevation (Card)
box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.1);
Harsh Directional Drop
box-shadow: 12px 12px 0px 0px rgba(0, 0, 0, 1);
Inner Carved / Pressed State
box-shadow: inset 0px 0px 15px 2px rgba(0, 0, 0, 0.2);
When to use this tool
- Designing floating action buttons (FABs) with a soft, natural drop-shadow.
- Creating "Neumorphic" interfaces by mixing light background colors with subtle inset or wide-spread shadows.
- Visually debugging CSS shadows that look "dirty" or overly dark by fine-tuning the opacity and spread.
- Generates clean, cross-browser compatible prefixed CSS (`-webkit-box-shadow`, `-moz-box-shadow`).
Frequently Asked Questions
What is the difference between Blur and Spread?
The Blur radius determines how soft the shadow edges are; a high blur means a very soft, gradient-like edge. The Spread radius determines the physical size of the shadow block before the blur happens. Setting spread to a negative number makes the shadow smaller than the box, which is the secret to a 'floating' elevation effect.
What is an Inset shadow?
By default, shadows project outward from the element. Adding the `inset` keyword moves the shadow inside the border of the element. This creates the illusion that the element is pushed into or carved out of the page.
How do I make a shadow look more realistic?
Realistic light is rarely harsh. The secret to premium Apple-style or Stripe-style shadows is a high Blur radius (e.g., 30px+), a slightly negative Spread radius (e.g., -5px), and very low Opacity (e.g., 5% to 15% black). Try our 'Soft' or 'Deep' presets to see this in action.
Can I use rgba colors for shadows?
Absolutely, and you always should! Using solid colors (like `#000000`) looks terrible for shadows. Setting the color to black but dropping the alpha (opacity) to `0.1` (`rgba(0,0,0,0.1)`) allows the background color of the page to realistically tint the shadow.