Build CSS box shadows with live preview. Tune horizontal and vertical offsets, blur, spread, color, and opacity. Stack up to four shadow layers and copy the complete box-shadow value in one click.
The CSS box-shadow property attaches one or more shadow effects to an HTML element's bounding box. Each shadow layer is described by a set of length values — horizontal offset, vertical offset, blur radius, and spread radius — combined with a color value. You can also prepend the keyword inset to push the shadow inside the element's padding edge rather than outside its border edge. The complete syntax for a single shadow is: box-shadow: [inset] offsetX offsetY blurRadius spreadRadius color; and multiple layers are comma-separated, rendered front to back.
Box shadows are one of the most versatile visual tools in CSS. Designers use them to give cards a sense of elevation, to draw attention to modal dialogs, to simulate depth in flat design systems, and to create inner-glow or inset-pressed effects for form inputs and buttons. Because shadows respect the element's border-radius, a pill-shaped button receives a correctly shaped shadow without any extra work. Unlike filter: drop-shadow(), box-shadow does not bleed through transparent areas of an image — it follows the element's layout box, making it predictable and easy to reason about in complex layouts.
Understanding the relationship between blur and spread helps you achieve precise results. Blur diffuses the shadow outward: a blur of 0 gives a hard, opaque edge identical to the element's outline, while higher values create soft, painterly halos. Spread shifts the shadow's size before blur is applied: a positive spread value makes a shadow that extends further than the element, useful for creating visible outlines without affecting layout flow, since box shadows do not occupy space in the document flow. A negative spread on an offset shadow creates the popular "directional shadow under a lifting card" effect.
Stacking multiple shadow layers on a single element produces effects that a single layer cannot achieve. A common pattern used in modern design systems combines a tight, dark base shadow with a larger, lighter ambient shadow to simulate realistic light diffusion. Another popular multi-layer approach stacks an inner border shadow (using negative spread with zero offset) on top of a regular elevation shadow to give elements a subtle bordered-card treatment without adding extra DOM elements. This generator builds comma-separated multi-layer output ready to paste directly into any stylesheet or design token file.
Start with the default single shadow layer that loads on the page. Every slider and input updates the live preview and the CSS output textarea instantly — no button press is needed. The horizontal offset slider moves the shadow left (negative values) or right (positive values) relative to the element. The vertical offset slider moves it up (negative) or down (positive). These two controls together determine the perceived light source direction and the overall shadow angle.
The blur radius slider softens the shadow edges from a crisp line at 0 to a broad, feathered glow at 100. The spread radius allows you to inflate or deflate the shadow footprint independently of blur — use it to add breathing room around a tight shadow or to shrink a large shadow back toward the element boundary. Select a shadow color with the color picker and fine-tune transparency with the opacity slider, which converts the hex color to an rgba() value automatically so you do not need to do the math manually.
Click the "Add Shadow Layer" button to introduce a second, third, or fourth shadow on top of the first. Each layer has its own independent set of controls. The layers render in the order they appear, with the first layer on top. Use the Remove button beside any layer to delete it, keeping at least one layer active at all times. The live preview card updates in real time as you adjust any layer, letting you see the combined effect immediately before committing to code.
Once you are satisfied with the shadow design, click "Copy CSS" to copy the complete box-shadow: ...; declaration to your clipboard. Paste it directly into a CSS file, a styled-component template literal, a Tailwind arbitrary value like shadow-[...], or a design token JSON file. The Reset All button restores the tool to a single default layer so you can start a new shadow from scratch without refreshing the page.
Set horizontal offset to 0, vertical offset to 4px, blur to 16px, spread to 0, color to black at 18% opacity. This produces a soft, centered shadow that lifts a card off the page background — the standard elevation shadow used in Material Design and Tailwind's shadow-md class.
Add two layers. Layer 1: offsetX 0, offsetY 2, blur 4, spread -1, rgba(0,0,0,0.3). Layer 2: offsetX 0, offsetY 8, blur 24, spread 0, rgba(0,0,0,0.12). The tight base shadow anchors the element while the large ambient shadow creates convincing physical depth used in premium dashboard UIs.
Enable the Inset toggle on a layer, set offsetY to 3, blur to 6, spread to 0, color to black at 35% opacity. Apply this to a button's :active state. When clicked, the shadow appears inside the button and creates a convincing pressed-in effect without changing the element's position or dimensions.
The CSS box-shadow property adds one or more shadow effects to an element's box. Each shadow is defined by horizontal offset, vertical offset, blur radius, spread radius, color, and an optional inset keyword. Multiple shadows are separated by commas.
The blur radius controls how soft the shadow edges are. A value of 0 produces a sharp, hard-edged shadow. Higher values create a more diffuse, feathered shadow. There is no maximum value — large blur radii produce very spread-out, faint shadows.
Spread radius expands or contracts the shadow before blur is applied. A positive spread makes the shadow larger than the element. A negative spread shrinks it. Setting spread to 0 means the shadow starts at exactly the element's dimensions.
Adding inset changes an outer shadow to an inner shadow. Instead of casting a shadow outside the element's border, the shadow appears inside the element's padding edge. Inset shadows are useful for pressed-button effects and inner glow styles.
Yes. CSS box-shadow accepts a comma-separated list of shadow definitions. Layers are rendered front to back — the first value in the list appears on top. This generator lets you build up to 4 shadow layers and combines them into a single copy-ready CSS value.
The box-shadow property does not have a standalone opacity parameter. Opacity is controlled through the shadow color. Use rgba() notation to set the alpha channel, for example rgba(0, 0, 0, 0.25) for 25% opacity black. This generator converts the color picker value and the opacity slider into an rgba() color automatically.