How to Create Neumorphism in CSS: Simple Guide and Examples

To create neumorphism in CSS, use a combination of box-shadow with both light and dark shadows to simulate soft, extruded shapes. Apply subtle background colors and rounded corners to enhance the soft, 3D look.

Syntax

Neumorphism mainly uses the box-shadow property with two shadows: one light and one dark. The light shadow simulates a highlight, and the dark shadow simulates a soft shadow. Rounded corners and a soft background color help create the effect.

• background-color: sets the base color of the element.
• border-radius: rounds the corners for a soft shape.
• box-shadow: two shadows, one light and one dark, offset in opposite directions.

css

.neumorphic {
  background-color: #e0e0e0;
  border-radius: 12px;
  box-shadow: 8px 8px 15px #bebebe, -8px -8px 15px #ffffff;
  width: 150px;
  height: 150px;
}

Output

A square with soft rounded corners and subtle shadows that look like it is softly raised from the background.

Example

This example shows a simple neumorphic button with soft shadows and rounded corners. The shadows create a raised effect that looks like the button is gently popping out of the background.

css

html, body {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e0e0e0;
  font-family: Arial, sans-serif;
}

button {
  background-color: #e0e0e0;
  border: none;
  border-radius: 20px;
  box-shadow: 8px 8px 15px #bebebe, -8px -8px 15px #ffffff;
  padding: 15px 40px;
  font-size: 1.2rem;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}

button:active {
  box-shadow: inset 8px 8px 15px #bebebe, inset -8px -8px 15px #ffffff;
}

Output

A centered rounded button with a soft raised shadow that looks like it is popping out. When clicked, the shadow inverts to look pressed in.

Common Pitfalls

Common mistakes when creating neumorphism include:

• Using too strong or harsh shadows that break the soft look.
• Choosing background and shadow colors that do not contrast softly.
• Not using rounded corners, which makes the effect look sharp and unnatural.
• Forgetting to invert shadows on active or pressed states, losing the tactile feel.

css

/* Wrong: harsh shadows and no rounded corners */
.wrong {
  background-color: #e0e0e0;
  box-shadow: 10px 10px 5px #000000, -10px -10px 5px #ffffff;
  border-radius: 0;
  width: 150px;
  height: 150px;
}

/* Right: soft shadows and rounded corners */
.right {
  background-color: #e0e0e0;
  box-shadow: 8px 8px 15px #bebebe, -8px -8px 15px #ffffff;
  border-radius: 12px;
  width: 150px;
  height: 150px;
}

Output

The wrong style looks harsh and flat with sharp edges; the right style looks soft and gently raised with smooth edges.

Quick Reference

Tips for creating neumorphism:

• Use a light neutral background color like #e0e0e0 or #f0f0f0.
• Apply border-radius between 10px and 30px for softness.
• Use two box-shadow layers: one dark shadow offset down-right, one light shadow offset up-left.
• Invert shadows on active states for a pressed effect.
• Keep shadows soft with blur radius around 15px.

Key Takeaways

Neumorphism uses dual soft shadows with light and dark colors to create a raised or inset effect.

Rounded corners and subtle background colors are essential for the soft, modern look.

Invert shadows on active states to simulate pressing or clicking.

Avoid harsh shadows and sharp edges to maintain the gentle, tactile feel.

Use consistent shadow offsets and blur for a balanced 3D effect.