Neumorphism Button Generator

Create beautiful soft UI buttons with customizable shadows.
Adjust colors, shadows, and border radius for the perfect neumorphic effect.

Background Color

Text Color

Shadow Settings

Shadow Distance8px

Shadow Blur16px

Shadow Intensity15%

Shape Settings

Border Radius12px

Padding X (Horizontal)24px

Padding Y (Vertical)12px

CSS Code

.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;
}

Need neumorphism styles from real sites?

Frontend Hero's CSS Scanner lets you extract any button style from any website in 2 clicks. See how the pros build their soft UI components.

Get Frontend Hero now →

Explore more CSS tools

CSS Grid Generator

Create grid layouts visually

CSS Flexbox Generator

Create flex layouts visually

CSS Gradient Generator

Create custom gradients

CSS Text Gradient

Gradient text effects

CSS Gradients Collection

275+ ready-to-use gradients

CSS Box Shadow Generator

Design multi-layer shadows

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

Fluid Typography

Scale text across screen sizes

Browse all free CSS tools →