How to Create Inset Shadow in CSS: Simple Guide

To create an inset shadow in CSS, use the box-shadow property with the inset keyword. This makes the shadow appear inside the element instead of outside, giving a recessed look.

Syntax

The box-shadow property adds shadow effects around an element's frame. To create an inset shadow, include the inset keyword before the shadow values.

• inset: makes the shadow appear inside the element.
• offset-x: horizontal shadow position (positive moves right, negative left).
• offset-y: vertical shadow position (positive moves down, negative up).
• blur-radius: how blurry the shadow is (optional).
• spread-radius: size of the shadow (optional).
• color: shadow color.

css

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

Example

This example shows a blue box with a soft black inset shadow inside it, making it look like it is pressed inward.

css

html {
  font-family: Arial, sans-serif;
  background: #f0f0f0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.box {
  width: 200px;
  height: 200px;
  background-color: #3498db;
  box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}

Output

A blue square box centered on a light gray background with a dark shadow inside the edges, giving a sunken effect.

Common Pitfalls

Common mistakes when creating inset shadows include:

• Forgetting the inset keyword, which results in a normal outer shadow.
• Using too large blur or spread values, making the shadow look unnatural or too faint.
• Choosing shadow colors that do not contrast well with the background, making the effect invisible.

Always test your shadow on the actual background color to ensure visibility.

css

/* Wrong: Outer shadow instead of inset */
.box-wrong {
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
}

/* Correct: Inset shadow inside the box */
.box-correct {
  box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.5);
}

Quick Reference

Property	Description	Example
inset	Makes shadow appear inside the element	box-shadow: inset 3px 3px 5px #000;
offset-x	Horizontal shadow position	5px (right), -5px (left)
offset-y	Vertical shadow position	5px (down), -5px (up)
blur-radius	How blurry the shadow is	10px (soft edges)
spread-radius	Size of the shadow	2px (larger shadow)
color	Shadow color	rgba(0,0,0,0.5) (semi-transparent black)

Key Takeaways

Use the 'inset' keyword in box-shadow to create inner shadows.

Adjust offset, blur, and spread values to control shadow shape and softness.

Choose shadow colors that contrast with the element background for visibility.

Without 'inset', shadows appear outside the element by default.

Test shadows on different backgrounds to ensure the effect is clear.