Neumorphism
Visual LanguageA design style combining flat design with subtle 3D effects, using soft shadows to create elements that appear to extrude from or sink into the background.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Neumorphism coming soon.
How It Works in Apps/Websites
Neumorphism (new skeuomorphism) creates soft, extruded UI elements using dual shadows - one light and one dark. Elements appear to be made of the same material as the background. Key technique: two box-shadows (one dark positioned bottom-right, one light positioned top-left) on a background matching the page.
How AI Interprets This Term
When you say 'neumorphism', AI expects: elements with soft, plastic-like appearance. Background matches parent. Two shadows: bottom-right (dark, 5-15px offset, 10-30px blur) and top-left (light/white, same offset inverted). Usually light gray backgrounds (#e0e5ec). Subtle, not dramatic.
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Create a neumorphic button with soft shadows
Design a neumorphism calculator: light gray background (#e0e5ec), number buttons appear raised (shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff), pressed state appears inset with inverted shadows. Circular buttons, rounded display area.
Show a neumorphic toggle switch in off state (extruded track, inset thumb position) vs on state (thumb pressed into opposite side)
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
States
Usage Guidelines
When to Use
- •Modern minimalist interfaces
- •Single-color themes
- •Subtle, soft aesthetic
- •Personal projects and portfolios
When NOT to Use
- •High contrast requirements
- •Dark mode designs
- •Content-heavy interfaces
- •Production apps (accessibility)