Neumorphism Button Generator
Create beautiful soft UI buttons with customizable shadows.
Adjust colors, shadows, and border radius for the perfect neumorphic effect.
Shadow Settings
8px
16px
15%
Shape Settings
12px
24px
12px
.neumorphism-button {
background: #e0e0e0;
color: #333333;
border: none;
border-radius: 12px;
padding: 12px 24px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #e5e5e5;
transition: all 0.2s ease;
}
.neumorphism-button:hover {
box-shadow: 6px 6px 12px #bebebe, -6px -6px 12px #e5e5e5;
}
.neumorphism-button:active {
box-shadow: inset 4px 4px 8px #bebebe, inset -4px -4px 8px #e5e5e5;
}Explore more CSS tools
CSS Grid Generator
Create grid layouts visually
CSS Flexbox Generator
Create flex layouts visually
CSS Gradient Generator
Create custom gradients
Aa
CSS Text Gradient
Gradient text effects
CSS Gradients Collection
275+ ready-to-use gradients
CSS Box Shadow Generator
Design multi-layer shadows
Aa
CSS Selection Generator
Style text highlight colors
CSS Scrollbar Generator
Style custom scrollbars
CSS Blend Mode Generator
Mix colors with blend modes
CSS Cursor Generator
Preview all cursor styles
CSS Loader Generator
Create loading animations
BTN
CSS Button Generator
Design buttons with hover effects
✨
CSS Glow Generator
Create neon glow effects
Aa
Fluid Typography
Scale text across screen sizes
