cardneumorphismintermediate

Neumorphism Card

A soft UI card with raised/inset shadows creating a physical, tactile appearance.

Preview

Neumorphic Card

Soft shadows create depth without traditional borders or backgrounds.

<div class="bg-gray-200 p-10 min-h-[300px] flex items-center justify-center">
  <div class="bg-gray-200 rounded-2xl p-8 max-w-sm shadow-[8px_8px_16px_#b8b9be,-8px_-8px_16px_#ffffff]">
    <h3 class="text-lg font-bold text-gray-700 mb-2">Neumorphic Card</h3>
    <p class="text-gray-500 text-sm leading-relaxed">Soft shadows create depth without traditional borders or backgrounds.</p>
  </div>
</div>

Color Breakdown

Background

bg-gray-200

#e5e7eb

Dark Shadow

shadow-[...]

#b8b9be

Light Shadow

shadow-[...]

#ffffff

Title

text-gray-700

#374151

Body Text

text-gray-500

#6b7280

Dark Mode Variant

Add these Tailwind classes for a dark mode adaptation of this recipe.

dark:bg-gray-800 dark:shadow-[8px_8px_16px_#1a1a2e,-8px_-8px_16px_#2d2d44]

Use Cases

Dashboard widgetsSettings panelsProfile cards

Browser Support

All modern browsers.

Related Recipes

Glassmorphism Card

card - intermediate

Gradient Border Card

card - advanced

Image Overlay Card

card - intermediate

Pricing Card

card - intermediate

Testimonial Card

card - beginner

Feature Card

card - beginner

Build Your Own Color Recipe

Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.

Explore Tools

Frequently Asked Questions

Why does neumorphism need a matching background color?▼

The card background must match the page background so the dual shadows create a seamless raised effect.