CalculateY CalculateY

Box Shadow Generator

The CSS box-shadow property follows the syntax box-shadow: [inset] offset-x offset-y blur spread color, where offset controls position, blur controls softness, spread controls size, and color sets the shadow tone with optional opacity. A common subtle shadow is box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1). Adjust the controls below to generate a custom shadow with a live preview.

Quick Answer

A typical card shadow uses box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1), which creates a subtle downward shadow with 6px blur and 10% opacity.

Shadow Properties

Preview

Common Examples

Input Result
0px 4px 6px 0px, #000000 at 10% opacity box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
0px 10px 25px -5px, #000000 at 20% opacity box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.2);
inset 0px 2px 4px 0px, #000000 at 15% opacity box-shadow: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
5px 5px 0px 0px, #3B82F6 at 100% opacity box-shadow: 5px 5px 0px 0px rgba(59, 130, 246, 1);
0px 20px 60px 0px, #000000 at 30% opacity box-shadow: 0px 20px 60px 0px rgba(0, 0, 0, 0.3);

How It Works

The CSS box-shadow property adds one or more shadow effects to an element. Each shadow is defined by up to six values.

Syntax

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

Where:

  • inset (optional): places the shadow inside the element instead of outside
  • offset-x: horizontal displacement. Positive values move the shadow right, negative values move it left.
  • offset-y: vertical displacement. Positive values move the shadow down, negative values move it up.
  • blur-radius: controls the blur. A value of 0 creates a sharp shadow. Higher values create softer, more diffused shadows. The blur algorithm expands the shadow by this radius in all directions and then applies a Gaussian blur.
  • spread-radius: expands or contracts the shadow. Positive values make the shadow larger than the element, negative values make it smaller. A spread of -5px with an offset of 10px creates a shadow that appears only on one side.
  • color: typically specified as rgba() to control opacity. rgba(0, 0, 0, 0.1) is black at 10% opacity.

Common Shadow Patterns

  • Subtle card: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06)
  • Medium elevation: 0 4px 6px rgba(0,0,0,0.1)
  • Heavy elevation: 0 20px 60px rgba(0,0,0,0.3)
  • Inset pressed: inset 0 2px 4px rgba(0,0,0,0.15)
  • Retro hard shadow: 5px 5px 0 #000000

Worked Example

For a card with a subtle bottom shadow at 10% opacity: offset-x = 0 (centered horizontally), offset-y = 4px (shifted down), blur = 6px (soft), spread = 0 (no expansion), color = rgba(0, 0, 0, 0.1). The result is box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);. The 6px blur extends the shadow 6px beyond its offset position and applies a Gaussian fade. At 10% opacity, the shadow is visible but does not dominate the design.

Related Calculators

CSS Gradient Generator

Generate linear and radial CSS gradient declarations with a live preview.

Color Contrast Checker

Check WCAG 2.1 color contrast ratios between foreground and background hex colors.

Frequently Asked Questions

What is the difference between blur and spread?
Blur controls how soft or diffused the shadow appears. A blur of 0 creates a hard edge; higher values create gradual fading. Spread expands or contracts the size of the shadow itself. A positive spread makes the shadow larger than the element, while a negative spread makes it smaller. They are independent properties that combine to create the final shadow shape.
How do I create a shadow on only one side?
Use a combination of offset and negative spread. For a bottom-only shadow, set offset-x to 0, offset-y to a positive value (e.g. 10px), blur to your desired softness, and spread to a negative value equal to the blur (e.g. -10px). The negative spread contracts the shadow so it only appears where the offset pushes it.
Can I add multiple shadows to one element?
Yes. Separate multiple shadow values with commas: box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06);. The first shadow in the list renders on top. Layered shadows create more realistic depth effects than a single shadow.
What is an inset shadow?
Adding the inset keyword places the shadow inside the element instead of outside. Inset shadows create a pressed or recessed appearance. They follow the same offset, blur, spread, and color syntax. Common use cases include form input focus states and toggle button pressed states.
Does box-shadow affect layout?
No. Box shadows are purely visual and do not affect the element's box model, dimensions, or layout flow. Shadows can extend beyond the element's boundaries without causing scrollbars or affecting neighboring elements. This makes them safe to add or animate without layout shifts.