buttonsintermediate

Neumorphism Button

Soft UI button with inner and outer shadows creating a raised effect.

Preview

Tailwind Classes

bg-gray-200 rounded-xl shadow-[6px_6px_12px_#b8b9be,-6px_-6px_12px_#ffffff] hover:shadow-[inset_6px_6px_12px_#b8b9be,inset_-6px_-6px_12px_#ffffff] transition-shadow

CSS Code

.neumorph-btn {
  background: #e0e0e0;
  border-radius: 0.75rem;
  box-shadow: 6px 6px 12px #b8b9be, -6px -6px 12px #ffffff;
}
.neumorph-btn:hover {
  box-shadow: inset 6px 6px 12px #b8b9be, inset -6px -6px 12px #ffffff;
}

HTML Example

<div class="bg-gray-200 p-8">
  <button class="bg-gray-200 rounded-xl px-6 py-3 shadow-[6px_6px_12px_#b8b9be,-6px_-6px_12px_#ffffff] hover:shadow-[inset_6px_6px_12px_#b8b9be,inset_-6px_-6px_12px_#ffffff] transition-shadow font-medium text-gray-700">
    Neumorphic Button
  </button>
</div>

Use Cases

Soft UI designsToggle buttonsControl panelsDashboard widgets

Browser Support

All modern browsers

#neumorphism#soft-ui#buttons#shadows