📡 You're offline — showing cached content
⚡ New version available!
Quick Access
🗺️ Roadmaps 🃏 Flashcards 📚 Series 🎓 Tutorials 🗺️ My Path 🎤 Mock Interview ⚡ Cheat Code 📄 Resume Builder 🛠️ Dev Tools
Tutorials › CSS Mastery › Neumorphism

Neumorphism

4 min read
Neumorphism uses two box-shadows on a matching background colour to simulate soft extruded buttons. The pressed state uses inset shadows. Be careful — the low contrast effect can cause accessibility problems.

Neumorphism Style

.card {
    background: #e0e5ec;
    border-radius: 16px;
    box-shadow:
        6px  6px 12px rgba(163, 177, 198, 0.6),
        -6px -6px 12px rgba(255, 255, 255, 0.8);
}

.card:active {
    box-shadow:
        inset 4px  4px 8px rgba(163, 177, 198, 0.6),
        inset -4px -4px 8px rgba(255, 255, 255, 0.8);
}