The CSS box-shadow property adds shadow effects around an element's frame, allowing control over the shadow's position, blur, spread, and color. It is widely used to add depth and a three-dimensional look to web page elements. 

Syntax

The basic syntax for the box-shadow property is:

box-shadow: [inset] h-offset v-offset blur-radius spread-radius color;

You can apply multiple shadows to a single element by separating the definitions with commas. 

Property Values

Only the horizontal (h-offset) and vertical (v-offset) offsets are required. 

Examples

• Basic shadow (offset and color):

  css

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

  This creates a gray shadow 5 pixels to the right and 10 pixels below the element.
• Shadow with blur and spread:

  css

  .example-2 {
    box-shadow: 10px 10px 8px 10px #aaaaaa;
  }
  

  This shadow has an offset of 10px in both directions, a blur radius of 8px, and a spread radius of 10px.
• Inner shadow (inset):

  css

  .example-3 {
    box-shadow: 5px 10px inset;
  }
  

  This creates a default-colored shadow inside the element's border.
• Multiple shadows:

  css

  .example-4 {
    box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
  }
  

  This applies three distinct shadows to the same element, layered on top of each other (the first one is on top).

• The box-shadow CSS property adds shadow effects around an element's frame. It allows you to create depth, elevation, and 3D effects for containers like <div>s, buttons, and cards. "box-shadow: [inset] h-offset v-offset blur spread color;"

Property Values

Key Examples

• Simple Drop Shadow: box-shadow: 10px 10px 5px grey;
• Inner Shadow: box-shadow: inset 5px 5px 10px grey;
• Multiple Shadows: Separate different shadow layers with a comma.
  • Example: box-shadow: 3px 3px red, -1px -1px 5px blue; 
• Layering: The first shadow in a comma-separated list appears on top.
• Border Radius: If the element has a border-radius, the shadow will automatically follow the rounded corners.
• Layout Impact: Box shadows do not affect the layout or take up space in the box model.
• Transitions: You can smoothly animate shadows on :hover using the CSS transition property. 

For inspiration, you can explore collections of beautiful pre-made box shadows to copy and paste directly into your projects. 

The inset keyword in the CSS box-shadow property changes a standard outer shadow (drop shadow) to an inner shadow, making the element look recessed or pressed into the background. 

Syntax

The general syntax for the box-shadow property with the inset keyword is:

box-shadow: inset h-offset v-offset blur-radius spread-radius color;

Only the horizontal (h-offset) and vertical (v-offset) offsets are required. The inset keyword can be placed at the beginning or end of the value list. 

• inset: (Optional) Changes the shadow from an outer (default) to an inner shadow.
• h-offset: (Required) The horizontal position of the shadow. Positive values move it right, negative values move it left.
• v-offset: (Required) The vertical position of the shadow. Positive values move it down, negative values move it up.
• blur-radius: (Optional) The blur distance. Higher values create a more blurred, larger shadow. Defaults to 0 (sharp edges).
• spread-radius: (Optional) A positive value expands the shadow size, while a negative value shrinks it. Defaults to 0.
• color: (Optional) The color of the shadow. Defaults to the element's text color if omitted. 

Examples

• Basic Inset Shadow:

A simple inner shadow giving a subtle depth effect:

.element {
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3);
}

This example produces a dark shadow inside the top and left edges, making the element look slightly sunken. 

• Multiple Inset Shadows:

You can specify multiple shadows for an element by separating them with commas. This is useful for creating complex effects like neumorphism: 

.neumorphic-inset {
  background: #e0e0e0;
  box-shadow: 
    inset 6px 6px 10px 0 rgba(0, 0, 0, 0.2), 
    inset -6px -6px 10px 0 rgba(255, 255, 255, 0.5);
}

This code creates a light shadow from one direction and a dark shadow from the opposite, mimicking a surface pressed into the background. 

Inset Shadow on One Side

To achieve an inset shadow on just one side, you can use a negative spread-radius to contract the shadow from the other sides: 

.left-inset-shadow {
  box-shadow: inset 5px 0 5px -5px #000;
}

For more complex single-side shadows, especially those with clean cuts, the clip-path property combined with box-shadow is a modern technique. 

You can experiment with these values using interactive tools like the MDN Box-shadow generator. 

The inset keyword in the CSS box-shadow property transforms an outer drop shadow into an inner shadow, making the element appear recessed or "pressed" into the page. 

Syntax

The inset keyword can be placed at either the very beginning or the very end of the property values. 

css

/* Standard syntax */
box-shadow: inset [horizontal-offset] [vertical-offset] [blur] [spread] [color];

/* Example */
box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5);

Core Components

• inset: Changes the shadow from an outer shadow (default) to an inner one.
• Horizontal Offset: Moves the shadow right (positive) or left (negative) inside the box.
• Vertical Offset: Moves the shadow down (positive) or up (negative) inside the box.
• Blur Radius: Higher values create a softer, more diffuse inner edge (optional, defaults to 0).
• Spread Radius: Expands or shrinks the shadow size (optional, defaults to 0).
• Color: Defines the shadow's color; defaults to the element's text color if omitted. 

Common Use Cases

Key Rules

• Placement: Inner shadows are drawn inside the element's border box but above the background and below the content.
• Rounding: If the element has a border-radius, the inset shadow will automatically follow the same rounded corners.
• Multiple Shadows: You can layer inset and outset shadows together by separating them with commas. 

Pro Tip: For precise styling, use an interactive Box Shadow Generator to preview offsets and blur in real-time.