Inset Shadows

Adding the inset keyword to box-shadow draws the shadow inside the element rather than outside. Inset shadows simulate depth, embossing, and pressed states.

Syntax

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

Common Use Cases

Text input fields that look sunken into the surface
Pressed/active button states
Inner highlight or light source effects
Faked inner border without changing layout

Combining Inset and Outer

Outer and inset shadows can coexist in the same property — just add both, comma-separated.

Example

/* Sunken input field */
.input {
    border: 1px solid #ccc;
    box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.06);
    padding: 8px 12px;
    border-radius: 4px;
    background: #fff;
}
.input:focus {
    border-color: #1a73e8;
    box-shadow:
        inset 0 2px 4px rgb(0 0 0 / 0.06),
        0 0 0 3px rgb(26 115 232 / 0.25);
}

/* Pressed button */
.btn:active {
    box-shadow: inset 0 3px 6px rgb(0 0 0 / 0.2);
    transform: translateY(1px);
}

/* Top highlight + bottom shadow = embossed */
.embossed {
    box-shadow:
        inset 0  2px 3px rgba(255,255,255,0.5),
        inset 0 -2px 3px rgba(0,0,0,0.15);
    background: #e0e0e0;
    border-radius: 8px;
}

CSS

Full Editor

Pro Tip

Combine an inset top-left white shadow with an inset bottom-right dark shadow to create a convincing embossed or neumorphic surface effect without any images.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned