CSS Box Shadow Generator - Visual Shadow Builder

box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.3);
--shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.3);

How to Use the Box Shadow Generator

Drag the sliders to adjust horizontal offset, vertical offset, blur radius, spread radius, and shadow opacity. Pick a shadow color using the color picker and toggle the inset option to switch between outer and inner shadows. The live preview updates instantly so you can see exactly how your shadow looks. Copy the CSS with one click when you are satisfied.

Understanding the CSS Box-Shadow Property

The box-shadow property adds one or more shadow effects to an element’s frame. It is one of the most commonly used CSS properties for creating depth, elevation, and visual hierarchy in web interfaces. Material Design, Apple’s Human Interface Guidelines, and most modern design systems rely heavily on shadow values to indicate elevation levels.

Box-Shadow Value Breakdown

Parameter	What It Controls	Typical Range
H-offset	Horizontal shadow position	-20px to 20px
V-offset	Vertical shadow position	-20px to 20px
Blur radius	Softness of shadow edge	0px to 50px
Spread radius	Shadow size expansion	-10px to 20px
Color	Shadow color with opacity	rgba() or hex
Inset	Inner shadow instead of outer	keyword

How Each Parameter Affects the Shadow

The horizontal and vertical offsets position the shadow relative to the element. Positive values move the shadow right and down, negative values move it left and up. A shadow with zero offset on both axes creates a glow effect centered behind the element.

Blur radius controls the softness of the shadow edge. A blur of 0 creates a sharp shadow with hard edges, while higher values produce increasingly diffuse, softer shadows. Most design systems use blur values between 4px and 24px for natural-looking results.

Spread radius expands or contracts the shadow independently of blur. A positive spread makes the shadow larger than the element, while a negative spread makes it smaller. Combining a negative spread with a positive blur is the technique for creating one-sided shadows.

Shadow Design Patterns

Effective shadow design follows a consistent light source direction across your entire interface. Most design systems assume light comes from the top, so shadows have positive vertical offsets and minimal horizontal offset. Consistency in shadow direction prevents visual confusion.

Elevation Levels with Layered Shadows

Professional designs typically define three to five elevation levels with increasing shadow intensity:

Elevation	Use Case	Shadow Style
Level 1	Cards, inputs	Subtle, tight shadow
Level 2	Dropdowns, tooltips	Medium blur and offset
Level 3	Modals, dialogs	Large blur, noticeable offset
Level 4	Floating action buttons	Strong shadow, wide spread

Layering two or three shadows per element produces more realistic depth than a single shadow. Combine a small, dark shadow for the contact edge with a larger, lighter shadow for the ambient light.

Performance Considerations

Box shadows are rendered by the browser’s compositor and have minimal performance impact in most cases. However, animating box-shadow values can trigger expensive repaints. For smooth shadow animations, prefer transitioning opacity on a pseudo-element with the shadow applied rather than animating the box-shadow property directly.

For creating complete visual effects on cards and UI elements, combine shadows with the CSS Gradient Generator for backgrounds. Use the Color Palette Generator to select shadow colors that complement your design’s color scheme.

Related Tools

• CSS Gradient Generator - Create gradient backgrounds for shadowed elements
• Color Palette Generator - Choose shadow colors that match your design
• Color Converter - Convert shadow colors between HEX, RGB, and HSL