CSS Box Shadow Generator

About the Box Shadow Generator

The CSS box-shadow property adds shadow effects around an element's frame. You can set multiple effects separated by commas, each with offset-x, offset-y, blur-radius, spread-radius, and color values.

CSS Box Shadow Syntax

box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;

• offset-x / offset-y: Position of the shadow. Positive values move it right/down, negative left/up.
• blur-radius: The larger the value, the bigger the blur. 0 produces a sharp edge.
• spread-radius: Positive values expand the shadow, negative shrink it.
• color: Any CSS color value. Use rgba() for transparency.
• inset: Makes the shadow render inside the element.

Popular Shadow Styles

• Soft/Material: Large blur, low opacity, slight negative spread for a floating card look.
• Hard: Zero blur creates a retro solid-shadow effect.
• Neon glow: 0 offset with colored shadow and high spread.
• Layered: Multiple shadows at increasing blur create realistic depth.

Use presets to quickly get started, then fine-tune with sliders for the perfect look.

How to Use the CSS Box Shadow Generator

1. Adjust the offset X and offset Y values to position the shadow. Positive X moves the shadow right, negative X moves it left. Positive Y moves it down, negative Y moves it up. These control the direction of the light source.
2. Set the blur radius to control how soft the shadow edges are. A value of 0 creates a sharp, hard-edged shadow; higher values produce increasingly diffuse, soft shadows. Most natural-looking shadows use a blur between 10px and 40px.
3. Set the spread radius to grow or shrink the shadow relative to the element's size. Positive values make the shadow larger; negative values make it smaller than the element.
4. Choose a shadow color and toggle inset to create an inner shadow effect. Use the live preview to see changes in real time, then copy the generated CSS with one click.

Understanding CSS Box Shadows

The CSS box-shadow property adds one or more shadow effects to an element's frame. It accepts a comma-separated list of shadows, each defined by 2-4 length values, an optional color, and an optional inset keyword. The syntax is: box-shadow: [inset] offsetX offsetY blurRadius spreadRadius color;. Offset values are required; blur, spread, and color are optional with defaults of 0 blur, 0 spread, and the current text color. Multiple shadows can be layered by separating each definition with a comma, enabling complex lighting effects.

Box shadows are one of the most versatile tools in CSS for creating depth and visual hierarchy. Common use cases include button hover states (where a shadow appears or deepens on interaction), card elevation in material design (where higher z-index elements cast larger, softer shadows), dropdown menus and modals (which need to appear lifted above the page), and neumorphic UI designs (which use paired light and dark shadows to simulate extrusion from the surface). The key to realistic shadows is using semi-transparent black (e.g., rgba(0,0,0,0.15)) rather than solid black, and matching the blur and offset to the intended light direction consistently across all elements in the interface.

Performance is an important consideration when using box shadows. Each shadow adds a compositing layer that the browser must render and maintain. Animating box-shadow properties can be expensive because the browser repaints the shadow on every frame. For smooth 60fps animations, consider animating opacity on a pseudo-element instead, or using the will-change hint. Large spread values and very large blur radii are the most costly. For simple hover effects and static elevation, box shadows are performant and well-optimized across all modern browsers.