Back to ToolsBack

Neumorphism Generator

Create soft UI elements with realistic depth

Controls

Shape Settings

Shape

Size: 200px

Border Radius: 20px

Effect Type

Flat

Basic raised appearance

Convex

Bulging outward effect

Concave

Sunken inward effect

Pressed

Button pressed state

Toggle

Switch-like appearance

Shadow Controls

Distance: 20px

Intensity: 15%

Blur: 40px

Light Direction

°

Color Settings

Background Color

Auto Shadow Colors

Automatically calculate shadow colors from background

Advanced Options

Inner ShadowGradient SurfaceBorderGenerate Hover State

Hover Lift: 5px

Presets

Create Custom Presets

Adjust the settings above to create your perfect neumorphic style. Each preset represents a common UI component pattern.

Popular Combinations

Controls

Shape Settings

Shape

Size: 200px

Border Radius: 20px

Effect Type

Flat

Basic raised appearance

Convex

Bulging outward effect

Concave

Sunken inward effect

Pressed

Button pressed state

Toggle

Switch-like appearance

Shadow Controls

Distance: 20px

Intensity: 15%

Blur: 40px

Light Direction

°

Color Settings

Background Color

Auto Shadow Colors

Automatically calculate shadow colors from background

Advanced Options

Inner ShadowGradient SurfaceBorderGenerate Hover State

Hover Lift: 5px

Presets

Create Custom Presets

Adjust the settings above to create your perfect neumorphic style. Each preset represents a common UI component pattern.

Popular Combinations

Neumorphism Design

Neumorphism creates soft, extruded plastic elements using subtle shadows and highlights. Perfect for modern interfaces with tactile appeal.

Keyboard Shortcuts

• Ctrl/Cmd + R: Random generation
• Ctrl/Cmd + Z: Reset to defaults
• 1: Default preview state
• 2: Hover preview state
• 3: Active preview state

Best Practices

• Use consistent light sources
• Keep shadows subtle and soft
• Ensure sufficient contrast
• Test accessibility compliance
• Consider dark mode variants