Answer: The Box Shadow Generator produces your output instantly from the input you provide — everything runs in your browser, free, with no signup required.
Generate CSS box shadows with live preview. Control offset, blur, spread, color and opacity.
This box-shadow generator gives you a live preview of CSS box shadows with full control over every parameter: horizontal and vertical offset, blur radius, spread radius, color, and opacity, plus the inset option for shadows that render inside the element. Copy production-ready CSS whenever the preview looks right.
The box-shadow property is the workhorse of modern interface depth. Buttons, cards, dropdowns, and modals all lean on it, and well-tuned shadows are a large part of why a design feels finished. Because shadows are cheap to render and infinitely adjustable, iterating visually — as this tool does — beats hand-editing numbers in a stylesheet every time.
The syntax is box-shadow: offset-x offset-y blur spread color, with an optional inset keyword first. offset-x moves the shadow right for positive values and left for negative; offset-y moves it down for positive and up for negative — note that positive Y is down, matching CSS screen coordinates. Blur softens the edges and must be zero or positive; spread grows or shrinks the shadow's footprint.
Multiple shadows are allowed, separated by commas, and layer bottom-to-top — a common pattern pairs a tight dark shadow with a large faint one to fake realistic light. The color accepts any CSS color value including rgba() and hsl(); using an alpha channel is the easiest way to keep shadows subtle.
The table below summarizes each component of the property, its effect, and the value range that behaves predictably across browsers. Inline the resulting value or drop it into a utility class — the CSS output is plain and dependency-free.
As starting points: a subtle card shadow is around 0 2px 8px rgba(0,0,0,0.10), a raised button often uses 0 4px 12px with a slightly higher alpha, and the layered look combines a 0 1px 3px dark shadow under a 0 8px 24px faint one. From there, adjust offset to imply a light source direction and keep it consistent across every elevated element on the page.
| Component | Effect | Notes |
|---|---|---|
| offset-x | Horizontal displacement | negative = left, positive = right |
| offset-y | Vertical displacement | negative = up, positive = down |
| blur | Edge softness | 0 or positive; larger = softer |
| spread | Shadow size change | positive grows, negative shrinks |
| color | Shadow color with alpha | rgba()/hsl() recommended |
| inset | Renders shadow inside the box | keyword, placed first |
Box shadows paint on the GPU and are fast, but huge blur radii on many simultaneous elements can cost paint time on low-end devices — if a component animates, prefer animating transform, which is compositable, rather than the shadow itself. A common trick for hover states is to pre-render both shadow states on stacked pseudo-elements and cross-fade opacity.
Keep contrast in mind: shadow alone should not be the only signal that an element is interactive. Pair elevation with a border, background shift, or focus ring so keyboard and low-vision users get the same affordance. The :focus-visible pseudo-element is the modern home for a shadow-style focus ring that doesn't appear on mouse click.
A credible shadow encodes a light source. Pick one direction for your light — conventionally top-left or directly above — and keep every shadow's offsets consistent with it across the interface. Inconsistent light sources read as wrong even when viewers cannot articulate why. For realistic depth, shadows directly beneath an element should have small offsets, while elements 'further from the page' (modals) deserve larger offsets and blur with lower opacity.
Color choice does more work than most developers expect. Pure black at full opacity looks harsh; real shadows are the ambient color of the scene dimmed, which is why rgba(0,0,0,0.1) or a tinted near-black works better. On dark backgrounds, black shadows disappear — switch to a slightly darker shade of the background hue or use a subtle light border plus shadow combination for elevation.
The inset keyword creates shadows inside the border box, giving the classic pressed-input or well effect. Inset shadows pair with a background slightly darker than the surrounding surface and a 1px inner highlight to fake machined depth. Note that inset shadows paint over the background but under the content, and they ignore border-radius expansion tricks that outer shadows support via spread.
For design systems, standardize a small elevation scale — three or four named shadow levels (card, dropdown, modal) — rather than inventing values per component. This keeps the interface coherent and makes dark-mode adjustments a one-place change. Generated values from this tool drop straight into CSS custom properties: define --shadow-1 through --shadow-3 once and reference them everywhere.
What is the CSS box-shadow syntax?
box-shadow: [inset] offset-x offset-y blur spread color — for example, box-shadow: 0 4px 12px rgba(0,0,0,0.15). Only the two offsets are required.
How do I make an inner shadow?
Add the inset keyword: box-shadow: inset 0 2px 6px rgba(0,0,0,0.2). Inset shadows render inside the element's border box and are common on inputs.
Can I apply multiple shadows to one element?
Yes — separate them with commas: box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.08). They layer bottom-to-top in the order written.
Why is my shadow going the wrong direction?
In CSS, positive offset-y moves the shadow downward. For a shadow above the element, use a negative offset-y.
What blur and spread values should I start with?
Try blur around 8–12px with a low-alpha black (rgba(0,0,0,0.1–0.2)) and spread at 0 for cards and buttons, then adjust to taste. Very large blurs on many elements can hurt paint performance.