The box-shadow property can add multiple layers of shadows to an element. Each layer can have different offsets, blur, spread, color, and can be inset. Here’s a more detailed explanation of each component:

1. Horizontal Offset (`h-offset`)

Purpose: Moves the shadow left or right.
Positive Value: Moves the shadow to the right.
Negative Value: Moves the shadow to the left.

2. Vertical Offset (`v-offset`)

Purpose: Moves the shadow up or down.
Positive Value: Moves the shadow down.
Negative Value: Moves the shadow up.

3. Blur Radius (`blur-radius`)

Purpose: Defines the blur effect.
Value: Greater values result in more blurred shadows.
Default: 0 (sharp shadow with no blur).

4. Spread Radius (`spread-radius`)

Purpose: Expands or contracts the shadow.
Positive Value: Makes the shadow larger.
Negative Value: Makes the shadow smaller.
Default: 0 (same size as the element).

5. Color

Purpose: Defines the color of the shadow.
Values: Any valid CSS color value (named colors, hex values, rgb(), rgba(), hsl(), hsla()).
Opacity Control: Using rgba() or hsla() allows for transparency effects.

6. Inset

Purpose: Changes the shadow from an outer shadow to an inner shadow.
Keyword: inset
Position: Must be specified before the other values if used.

Examples with Explanations

Simple Shadow

.element {
  box-shadow: 5px 5px 10px #888888;
}

Horizontal Offset: 5px to the right.
Vertical Offset: 5px down.
Blur Radius: 10px.
Color: Grey (#888888).

Shadow with Spread

.element {
  box-shadow: 5px 5px 10px 2px #888888;
}

Horizontal Offset: 5px to the right.
Vertical Offset: 5px down.
Blur Radius: 10px.
Spread Radius: 2px (expands the shadow).
Color: Grey (#888888).

Inner Shadow

.element {
  box-shadow: inset 5px 5px 10px #888888;
}

Inset: Changes the shadow to be inside the element.
Horizontal Offset: 5px to the right.
Vertical Offset: 5px down.
Blur Radius: 10px.
Color: Grey (#888888).

Multiple Shadows

.element {
  box-shadow: 5px 5px 10px #888888, -5px -5px 10px #444444;
}

First Shadow:
Horizontal Offset: 5px to the right.
Vertical Offset: 5px down.
Blur Radius: 10px.
Color: Grey (#888888).

Second Shadow:
Horizontal Offset: -5px to the left.
Vertical Offset: -5px up.
Blur Radius: 10px.
Color: Dark grey (#444444).

Practical Application Examples

Soft Shadow for Card Component

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box Shadow Example</title>
    <style>
        .card {
            width: 300px;
            height: 200px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            padding: 20px;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <div class="card">
        This is a card with a soft shadow.
    </div>
</body>
</html>

Horizontal Offset: 0 (centered).
Vertical Offset: 4px down.
Blur Radius: 8px (softens the shadow).
Color: Semi-transparent black (rgba(0, 0, 0, 0.2)).

Glowing Button

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box Shadow Example</title>
    <style>
        .button {
            padding: 10px 20px;
            background-color: #008CBA;
            color: white;
            border: none;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 140, 186, 0.5);
            margin: 50px;
        }
    </style>
</head>
<body>
    <button class="button">Hover me</button>
</body>
</html>

Horizontal Offset: 0 (centered).
Vertical Offset: 0 (centered).
Blur Radius: 10px (creates a glow effect).
Color: Semi-transparent blue (rgba(0, 140, 186, 0.5)).

Advanced Tips

Opacity and Color:

Using rgba or hsla allows for more control over the shadow’s transparency, which can produce more subtle and realistic shadows.

Multiple Shadows:

Combining multiple shadows can create complex effects, such as layered shadows or inner and outer shadows simultaneously.

Inset Shadows:

Useful for creating effects like pressed buttons or inner borders.

Responsiveness:

Shadows can be adjusted based on screen size or user interaction (e.g., hover states).

Performance Considerations:

Avoid using overly large blur radii or numerous shadows on many elements, as this can affect rendering performance, especially on lower-end devices.

Combining `box-shadow` with Other Properties

Shadows often work well with other CSS properties like border-radius for rounded corners, transform for 3D effects, and transitions for smooth animations.

.element {
  width: 200px;
  height: 100px;
  background-color: lightblue;
  border-radius: 15px;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.3s ease;
}
.element:hover {
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}

Initial State:
Soft shadow with smaller offsets and less blur.
Hover State:
Larger shadow with more pronounced offsets and blur.

More Examples : (try these codes )


box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

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

box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;

box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;

box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;

box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;

box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;

box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;

box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;

box-shadow: rgba(240, 46, 170, 0.4) -5px 5px, rgba(240, 46, 170, 0.3) -10px 10px, rgba(240, 46, 170, 0.2) -15px 15px, rgba(240, 46, 170, 0.1) -20px 20px, rgba(240, 46, 170, 0.05) -25px 25px;

box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px;

box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;

box-shadow: blue 0px 0px 0px 2px inset, rgb(255, 255, 255) 10px -10px 0px -3px, rgb(31, 193, 27) 10px -10px, rgb(255, 255, 255) 20px -20px 0px -3px, rgb(255, 217, 19) 20px -20px, rgb(255, 255, 255) 30px -30px 0px -3px, rgb(255, 156, 85) 30px -30px, rgb(255, 255, 255) 40px -40px 0px -3px, rgb(255, 85, 85) 40px -40px;

box-shadow: rgb(85, 91, 255) 0px 0px 0px 3px, rgb(31, 193, 27) 0px 0px 0px 6px, rgb(255, 217, 19) 0px 0px 0px 9px, rgb(255, 156, 85) 0px 0px 0px 12px, rgb(255, 85, 85) 0px 0px 0px 15px;

box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;

box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;

box-shadow: 0 0 0 2px rgba(218,102,123,1), 8px 8px 0 0 rgba(218,102,123,1);

box-shadow: 0px 9px 30px rgba(255, 149, 5, 0.3);

CSS Box-Shadow

1. Horizontal Offset (`h-offset`)

2. Vertical Offset (`v-offset`)

3. Blur Radius (`blur-radius`)

4. Spread Radius (`spread-radius`)

5. Color

6. Inset

Examples with Explanations

Simple Shadow

Shadow with Spread

Inner Shadow

Multiple Shadows

Practical Application Examples

Soft Shadow for Card Component

Glowing Button

Advanced Tips

Combining `box-shadow` with Other Properties

Subscribe to my newsletter

Akshima Sharma

Akshima Sharma

CSS Box-Shadow

1. Horizontal Offset (h-offset)

2. Vertical Offset (v-offset)

3. Blur Radius (blur-radius)

4. Spread Radius (spread-radius)

5. Color

6. Inset

Examples with Explanations

Simple Shadow

Shadow with Spread

Inner Shadow

Multiple Shadows

Practical Application Examples

Soft Shadow for Card Component

Glowing Button

Advanced Tips

Combining box-shadow with Other Properties

Subscribe to my newsletter

Akshima Sharma

Akshima Sharma

1. Horizontal Offset (`h-offset`)

2. Vertical Offset (`v-offset`)

3. Blur Radius (`blur-radius`)

4. Spread Radius (`spread-radius`)

Combining `box-shadow` with Other Properties