Inset Shadow Effect

This inset shadow effect creates a pressed-in appearance, useful for inputs, panels, and neumorphic designs.

HTML

<div class="ss-shadow inset">Inset Shadow</div>

<div class="ss-shadow inset">Inset Shadow</div>

CSS

.ss-shadow.inset{
  padding:24px;
  border-radius:14px;

  background:var(--inset-bg);
  color:var(--inset-text);
  box-shadow:inset 0 4px 8px var(--inset-shadow);
}

:root{
  --inset-bg:#f8fafc;
  --inset-text:#0f172a;
  --inset-shadow:rgba(0,0,0,.15);
}

@media (prefers-color-scheme: dark){
  :root{
    --inset-bg:#020617;
    --inset-text:#e5e7eb;
    --inset-shadow:rgba(255,255,255,.08);
  }
}

.ss-shadow.inset{
  padding:24px;
  border-radius:14px;

  background:var(--inset-bg);
  color:var(--inset-text);
  box-shadow:inset 0 4px 8px var(--inset-shadow);
}

:root{
  --inset-bg:#f8fafc;
  --inset-text:#0f172a;
  --inset-shadow:rgba(0,0,0,.15);
}

@media (prefers-color-scheme: dark){
  :root{
    --inset-bg:#020617;
    --inset-text:#e5e7eb;
    --inset-shadow:rgba(255,255,255,.08);
  }
}

Notes

• Pressed-in look
• Input-friendly
• Neumorphism style
• Subtle depth

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.