Preview

✨

Shape Type

Properties

Use light, desaturated colors for best neumorphism effect

150px
20px
20px
15%
40px

Presets

Generated CSS

CSS
/* Neumorphism Effect */
border-radius: 20px;
background: linear-gradient(145deg, rgb(244, 249, 255), rgb(204, 209, 216));
box-shadow: 11px 16px 40px rgb(186, 191, 198),
  -11px -16px 40px rgb(255, 255, 255);
Tailwind
<!-- Tailwind CSS (requires custom configuration) -->
<!-- Add to tailwind.config.js extend section: -->
boxShadow: {
  'neumorphism': '/* paste box-shadow value */'
}

<!-- Then use: -->
class="rounded-xl shadow-neumorphism"

<!-- Note: Neumorphism typically requires custom CSS values -->

💡 Neumorphism Tips

Color Choice

Neumorphism works best with light, desaturated colors. The effect relies on subtle shadows that blend with the background.

Contrast

Ensure sufficient contrast for accessibility. The soft shadows can make UI elements harder to distinguish. Use larger touch targets.

Light Source

Maintain a consistent light direction across your UI. Typically, light comes from the top-left (145°). Inconsistent lighting looks unnatural.

Use Sparingly

Neumorphism is best for accent elements like buttons and cards. Avoid using it for every element as it can reduce visual hierarchy.

Need Professional Web Design?

Brix340 creates stunning websites with modern neumorphic effects and beautiful UI.

Get a Free Quote