🎨 Quick Presets

📖 Usage Guide & Examples

Card Components

Use flat neumorphism for dashboard cards. Keep distance 8–15px, blur 20–30px for a balanced floating effect.

box-shadow: 10px 10px 20px rgba(0,0,0,0.25), -10px -10px 20px rgba(255,255,255,0.05);

Interactive Buttons

Default state: flat/convex. Pressed state: switch to inset shadow. This creates a satisfying click illusion.

/* default */ box-shadow: 6px 6px 12px rgba(0,0,0,0.2), -6px -6px 12px rgba(255,255,255,0.05);
/* pressed */ box-shadow: inset 4px 4px 10px rgba(0,0,0,0.25), inset -4px -4px 10px rgba(255,255,255,0.04);

Input Fields

Concave or pressed style for inputs creates a natural "sunken" feel that guides user focus.

box-shadow: inset 3px 3px 8px rgba(0,0,0,0.2), inset -3px -3px 8px rgba(255,255,255,0.05);
border-radius: 10px; border: none; outline: none;

Dark vs Light Background

For light neumorphism (white/gray backgrounds), increase light shadow opacity to 80–100% and use white (#ffffff). Dark backgrounds need subtle white highlights at low opacity (3–8%).

/* light theme */ box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #ffffff;

❓ FAQ

What is neumorphism?

Neumorphism (new skeuomorphism) is a UI design style using soft shadows to create elements that appear to "extrude" from or be "pressed into" the background. It combines flat design with subtle depth cues.

Why does neumorphism have accessibility concerns?

Low contrast between elements and backgrounds can make neumorphic UI hard to read for users with visual impairments. Always ensure sufficient color contrast for text, and avoid using neumorphism alone to indicate interactive states — pair it with color or icons.

How do I use the generated CSS?

Copy the generated CSS and apply it to any HTML element. Make sure the element's background matches the background-color used in the generator for the shadow to look correct.

Can I use neumorphism with colored backgrounds?

Yes! Change the background color in the generator to match your design. The tool automatically calculates light and dark shadow colors relative to your chosen background.

What's the difference between flat, concave, convex, and pressed?

Flat: uniform background, classic neumorphic shadow. Concave: element appears sunken with a gradient. Convex: element appears raised with an inverted gradient. Pressed: inset shadows simulate a clicked/depressed state.

AI Neumorphism Generator

🔒 Pro Features