Inner shadow (inset well)

When to use it

The well is for anything that should read as sunk into the page rather than resting on it: a search field, a text input, a slider track, a code block, a progress bar's trough, the empty state of a drop zone. On this site the slider tracks in the generator console and the readout are wells. The message is "put something here" or "this is where the value lives", which is the opposite of what a drop shadow says, and mixing the two on one page is what gives an interface a sense of physical order.

How it is built

Two inset shadows and a slightly darker fill. The first is the shadow of the page's edge falling into the well, from the top, with a little blur. The second is a spread-only hairline ring that defines the boundary. MDN's description of the keyword explains why they composite cleanly: inset shadows "appear above the background but below the content", so the well darkens at its edges without touching anything typed into it.

.well {
  background: #edeef3;                    /* a step darker than the page */
  border-radius: 12px;
  box-shadow:
    inset 0 2px 6px rgba(27, 35, 64, 0.18),   /* the page's edge shadow */
    inset 0 0 0 1px rgba(27, 35, 64, 0.08);   /* the boundary ring      */
}

The darker fill is not optional. An inset shadow on a box the same colour as the page produces a smudge with no edge; on a box one step darker it produces a hole. The step can be small: this site's canvas is #F5F7FA and its wells are #EDEEF3.

As a form input

The same recipe makes a text input that reads as a field without a heavy border. Remove the browser border, use the well shadows, and on focus append the outer focus ring to the same list, because a single box-shadow declaration can carry inset and outer shadows together:

.field {
  border: 0;
  background: #ffffff;
  border-radius: 8px;
  box-shadow:
    inset 0 1px 3px rgba(27, 35, 64, 0.12),
    inset 0 0 0 1px rgba(27, 35, 64, 0.5);    /* 3.1:1 boundary on white */
}
.field:focus-visible {
  outline: none;
  box-shadow:
    inset 0 1px 3px rgba(27, 35, 64, 0.12),
    inset 0 0 0 1px rgba(27, 35, 64, 0.5),
    0 0 0 2px #f5f7fa,
    0 0 0 4px #263eb6;                          /* focus ring */
}

The ring's contrast is the thing to measure. WCAG 2.2's non-text contrast criterion asks for 3:1 between a control's boundary and its surroundings, and a 1px ring of this navy needs about 50 per cent opacity on white to reach it: measured, 0.5 gives 3.14:1 and 0.24 gives only 1.63:1. Go lighter than that and the field boundary disappears for low-vision users; the fix in the neumorphism example is this ring.

Notes and limits

Inset shadows are clipped to the padding box, so they never leak and never affect layout, which makes them safer than outer shadows inside scrolling containers. Two things to avoid: an inset shadow on a box that also has a drop shadow, which reads as a lid on a hole, and an inset shadow on an image, where it darkens the picture's edges like a dirty frame. Keep wells for things that hold content.

The code in four formats

Straight from the generator's readout for this state. Copy the one your project speaks; the output formats guide explains where each goes.

box-shadow:
  inset 0 2px 6px rgba(27, 35, 64, 0.18),
  inset 0 0 0 1px rgba(27, 35, 64, 0.08);
border-radius: 12px;

$shadow:
  inset 0 2px 6px rgba(27, 35, 64, 0.18),
  inset 0 0 0 1px rgba(27, 35, 64, 0.08);

.element {
  box-shadow: $shadow;
  border-radius: 12px;
}

<div class="shadow-[inset_0_2px_6px_rgba(27,35,64,0.18),_inset_0_0_0_1px_rgba(27,35,64,0.08)] rounded-[12px]"></div>

/* Or name it once in your theme (Tailwind v4): */
@theme {
  --shadow-custom: inset 0 2px 6px rgba(27, 35, 64, 0.18), inset 0 0 0 1px rgba(27, 35, 64, 0.08);
}
/* then use class="shadow-custom" */

.element
  box-shadow inset 0 2px 6px rgba(27, 35, 64, 0.18), inset 0 0 0 1px rgba(27, 35, 64, 0.08)
  border-radius 12px