📦 Box Shadow Generator - Create CSS box shadows

🌫️

Layer {{ index + 1 }}

px
px
px
px
{{ shadow.opacity }}
⚙️
🎯
👁️
Preview Element
📝
{{ result.css }}
📊
Total Layers: {{ result.shadowCount }}
CSS Length: {{ result.css ? result.css.length : 0 }} characters
Shadow Type: {{ getShadowTypes() }}
💡

{{ example.title }}

{{ example.code }}
💾
⚠️ {{ error }}

ℹ️ About Box Shadow Generator

CSS box-shadow adds one or more shadows to an element's box. It is commonly used to show depth, separate cards from a background, create pressed or inset controls, and add focus or hover states without image assets.

The property is defined in the CSS Backgrounds and Borders specification, and the practical syntax is documented by MDN's box-shadow reference. A shadow can be a single value or a comma-separated shadow list, with the first shadow painted closest to the element.

Common CSS design use cases:

  • Cards and panels: Lift content blocks from the page background while keeping the box model unchanged.
  • Buttons and controls: Pair outer shadows with hover states or inset shadows for pressed states.
  • Modals and popovers: Use wider, softer shadows to imply a layer above the page.
  • Graphic effects: Build crisp offset shadows, glow effects, and layered neumorphic highlights.
  • Focus affordances: Add accessible-looking rings with zero blur and positive spread, while still testing contrast separately.

Syntax and technical details:

  • Required offsets: The first two lengths are offset-x and offset-y; positive X moves right, positive Y moves down, and negative values move left or up.
  • Blur radius: The optional third length must be non-negative. 0 creates a hard edge; larger values make the shadow softer and visually larger.
  • Spread radius: The optional fourth length expands the shadow with positive values and contracts it with negative values.
  • Color: Use modern CSS color syntax such as rgb(15 23 42 / 0.35) or hex colors with opacity. If omitted, the shadow color falls back to currentColor.
  • Inset: The inset keyword turns an outer drop shadow into an inner shadow clipped inside the element's padding box.
  • Multiple layers: Separate shadows with commas to combine a tight contact shadow, a soft elevation shadow, and a ring or glow.

Examples: 

box-shadow: 0 12px 24px -8px rgb(15 23 42 / 0.35);
box-shadow: inset 0 2px 6px rgb(0 0 0 / 0.25);
box-shadow: 0 0 0 2px rgb(34 211 238 / 0.45), 0 18px 40px -20px rgb(0 0 0 / 0.65);

Limitations and browser behavior:

  • Layout: Shadows do not increase element dimensions or reserve space, so large shadows can overlap nearby content unless margins or padding account for them.
  • Shape: Outer shadows follow the border box and respect border-radius; for transparent image silhouettes, filter: drop-shadow() may be a better fit.
  • Performance: Very large blur radii, many layered shadows, and animated shadows can cost more to paint than simple offsets.
  • Animation: Browsers can interpolate compatible shadow lists, but mixing inset and outer shadows in the same animated pair can prevent smooth interpolation.
  • Compatibility: Unprefixed box-shadow is supported across current browsers; only very old browser targets need vendor-prefix fallbacks.

Privacy note: Shadow values are design parameters, not sensitive data. This generator can be used without pasting private content; when you call the API, only the numeric settings and color values needed to generate the CSS are submitted.

API Usage Example:

POST /api/tools/webdev/box-shadow-generator
Content-Type: application/json

{
    "shadows": [
        {
            "offsetX": 0,
            "offsetY": 4,
            "blurRadius": 6,
            "spreadRadius": -1,
            "color": "#000000",
            "opacity": 0.1,
            "inset": false
        }
    ],
    "previewSettings": {
        "width": 200,
        "height": 150,
        "backgroundColor": "#ffffff",
        "containerBackground": "#f0f0f0"
    }
}
Ready