CSS Box Shadow: A Complete Guide for Beginners

The CSS box-shadow property is one of the most versatile tools for adding depth and visual interest to your web designs. This guide covers everything you need to know to master box shadows.

Understanding the Syntax

The box-shadow property accepts the following values:

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

Let's break down each value:

Offset X and Y

The first two values control the horizontal (X) and vertical (Y) position of the shadow relative to the element.

Positive X values move the shadow right

Negative X values move the shadow left

Positive Y values move the shadow down

Negative Y values move the shadow up

Example with offset only:

box-shadow: 10px 10px black;

Blur Radius

The third value controls how blurry or sharp the shadow appears. A value of 0 creates a sharp shadow, while larger values create softer, more diffused shadows.

box-shadow: 10px 10px 20px black;

Spread Radius

The fourth value controls the size of the shadow. Positive values make the shadow larger than the element, while negative values make it smaller.

box-shadow: 10px 10px 20px 5px black;

Color

The final value sets the shadow color. You can use any CSS color format:

Named colors: black, red, blue

Hex values: #000000, #ff0000

RGB/RGBA: rgb(0, 0, 0), rgba(0, 0, 0, 0.5)

HSL/HSLA: hsl(0, 0%, 0%), hsla(0, 0%, 0%, 0.5)

The Inset Keyword

Adding the inset keyword creates an inner shadow instead of an outer shadow:

box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);

This is useful for creating pressed button effects or input field styling.

Multiple Shadows

You can apply multiple shadows to a single element by separating them with commas:

box-shadow:

0 2px 4px rgba(0, 0, 0, 0.1),

0 4px 8px rgba(0, 0, 0, 0.1),

0 8px 16px rgba(0, 0, 0, 0.1);

Shadows are rendered in order, with the first shadow on top.

Common Shadow Patterns

Subtle Elevation

box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);

Medium Card Shadow

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

Dramatic Drop Shadow

box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);

Soft Glow Effect

box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);

Browser Support

The box-shadow property is supported in all modern browsers without prefixes. For very old browsers, you may need the -webkit- prefix.

Conclusion

Box shadows are a powerful tool for creating depth and visual hierarchy in your designs. Experiment with different values using ShadowSpark to find the perfect shadow for your project.