How to Create Neumorphism Buttons in CSS
Learn the soft UI design technique that makes buttons look like they're extruded from the background. Step-by-step tutorial with interactive demos.
What is Neumorphism?
Neumorphism (from "new" + "skeuomorphism") is a design style that creates the illusion of UI elements being extruded from or pressed into the background surface.
The effect is achieved using two box shadows: a light shadow on one side (simulating light reflection) and a dark shadow on the opposite side (simulating a cast shadow).
The key requirement is that the button background must match the container background for the effect to work properly.
Step-by-Step Tutorial
1Set the Background Color
The button background must match the container background. This is crucial for neumorphism to work. A light gray like #e0e0e0 is the most common choice.
.container {
background: #e0e0e0;
}
.neu-button {
background: #e0e0e0; /* Same as container */
}2Add Two Box Shadows
The magic happens with two shadows: a light one (top-left) and a dark one (bottom-right). The light shadow simulates light reflection, while the dark shadow simulates a cast shadow.
Dark Shadow (bottom-right)
8px 8px 16px #bebebePositive X and Y values push shadow down-right
Light Shadow (top-left)
-8px -8px 16px #ffffffNegative X and Y values push shadow up-left
.neu-button {
background: #e0e0e0;
box-shadow:
8px 8px 16px #bebebe, /* Dark shadow */
-8px -8px 16px #ffffff; /* Light shadow */
}3Add Border Radius
Neumorphism works best with rounded corners. A border-radius of 10-20px creates a soft, modern look. Remove any default borders.
.neu-button {
background: #e0e0e0;
border-radius: 12px;
border: none;
padding: 12px 24px;
box-shadow:
8px 8px 16px #bebebe,
-8px -8px 16px #ffffff;
}4Create the Pressed/Active State
For the pressed state, use inset shadows. This makes the button appear to be pushed into the surface.
.neu-button:active {
box-shadow:
inset 4px 4px 8px #bebebe,
inset -4px -4px 8px #ffffff;
}5Add Hover Transition
Add a smooth transition and a subtle hover effect. Reducing the shadow distance on hover creates a nice "lifting" sensation.
.neu-button {
background: #e0e0e0;
border-radius: 12px;
border: none;
padding: 12px 24px;
box-shadow:
8px 8px 16px #bebebe,
-8px -8px 16px #ffffff;
transition: all 0.2s ease;
}
.neu-button:hover {
box-shadow:
6px 6px 12px #bebebe,
-6px -6px 12px #ffffff;
}
.neu-button:active {
box-shadow:
inset 4px 4px 8px #bebebe,
inset -4px -4px 8px #ffffff;
}Interactive Demo
Experiment with different shadow settings to see how they affect the neumorphism effect. Click the button to see the active state.
.neu-button {
background: #e0e0e0;
border-radius: 12px;
border: none;
padding: 12px 24px;
box-shadow:
8px 8px 16px #bebebe,
-8px -8px 16px #ffffff;
transition: all 0.2s ease;
}
.neu-button:hover {
box-shadow:
6px 6px 12px #bebebe,
-6px -6px 12px #ffffff;
}
.neu-button:active {
box-shadow:
inset 4px 4px 8px #bebebe,
inset -4px -4px 8px #ffffff;
}Neumorphism Variations
Convex
Gradient makes it look rounded/bulging
Concave
Reversed gradient for dished look
Flat
Standard flat surface effect
/* Convex - bulging outward */
.neu-convex {
background: linear-gradient(145deg, #f0f0f0, #cacaca);
box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
}
/* Concave - dished inward */
.neu-concave {
background: linear-gradient(145deg, #cacaca, #f0f0f0);
box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
}
/* Flat - standard */
.neu-flat {
background: #e0e0e0;
box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
}Color Variations
Neumorphism works on any background color. Just calculate shadow colors that are slightly lighter and darker than your base.
Light Background
Base: #e0e5ec
Dark Background
Base: #2d2d2d
/* Light theme */
.light-theme {
background: #e0e5ec;
}
.light-theme .neu-button {
background: #e0e5ec;
box-shadow:
9px 9px 16px rgba(163,177,198,0.6),
-9px -9px 16px rgba(255,255,255,0.5);
}
/* Dark theme */
.dark-theme {
background: #2d2d2d;
}
.dark-theme .neu-button {
background: #2d2d2d;
color: #f0f0f0;
box-shadow:
8px 8px 16px #262626,
-8px -8px 16px #343434;
}Want More Neumorphism Button Examples?
Browse our collection of 20+ ready-to-use neumorphism button styles. Click any button to copy the CSS instantly.
View Neumorphism Button ExamplesFrequently Asked Questions
Neumorphism (also called soft UI) is a design style that combines flat design with skeuomorphism. It creates the illusion that UI elements are extruded from or pressed into the background using soft shadows. The effect is achieved with two shadows: a light shadow on one side and a dark shadow on the opposite side, giving elements a soft, 3D appearance.
Neumorphism relies on the illusion that the button is part of the same surface as the background. If the button and background colors differ, the shadows won't create the characteristic 'extruded' or 'pressed' look. The light and dark shadows need to blend naturally with the background to maintain the soft, realistic effect.
For dark backgrounds, swap your shadow colors. Use a slightly lighter color for the highlight shadow and a darker color for the shadow. For example, on a #2d2d2d background, use shadows like '8px 8px 16px #262626' for the dark shadow and '-8px -8px 16px #343434' for the light shadow. The principle remains the same: one lighter, one darker than the base.
Neumorphism can have accessibility challenges. The low contrast between elements and backgrounds can make it difficult for users with visual impairments to distinguish interactive elements. To improve accessibility: ensure sufficient color contrast for text, add clear focus states with outlines, consider adding subtle borders for definition, and test with users who have different visual abilities.
Skeuomorphism mimics real-world objects with detailed textures, gradients, and realistic effects (like Apple's old iOS icons). Neumorphism is more subtle and abstract, it doesn't try to look like a real physical object but rather creates a soft, extruded look from a flat surface using only shadows. Neumorphism is essentially a minimalist evolution of skeuomorphism.
More CSS Tutorials
Copy CSS from Website
Extract styles with 2 clicks
Center a Div (CSS)
Flexbox, Grid, and more
Center a Div (Tailwind)
Utility classes for centering
Convert CSS to Tailwind
CSS to utility classes
Glassmorphism Effect
Frosted glass UI style
Responsive Navbar
Mobile-friendly navigation
Sticky Header
Fixed navigation on scroll
CSS Pagination
Page navigation styles
CSS Accordion
Expandable content sections
Dropdown Menu
Hover and click dropdowns
CSS Modal
Popup dialog boxes
Toast Notifications
Animated alert messages
Hamburger Menu
Animated menu icon
Animate Gradients
Moving gradient backgrounds
Skeleton Loader
Loading placeholder UI
Element Screenshot
Capture any element as image
Pick Color from Website
Eyedropper tool comparison
Identify Fonts
Find fonts on any website
Download All Images
Bulk save images from any site
Measure Elements
Page ruler and measurements
Extract Colors from Website
Get any color palette instantly
Dark Mode Toggle
CSS variables and localStorage
Responsive Grid
CSS Grid auto-fit and minmax
Center Text in CSS
text-align, Flexbox, and Grid
Make Text Bold
font-weight values explained
Add Shadow in CSS
box-shadow, text-shadow, drop-shadow
Round Corners in CSS
border-radius and pill shapes
Style File Input
Custom upload buttons