Summarize this article with:
Soft shadows changed everything. When CSS neumorphism examples started flooding Dribbble in 2020, designers couldn’t stop experimenting with this fresh take on UI depth.
The technique creates interface elements that appear extruded from or pressed into their background. No harsh borders. No flat lifelessness. Just subtle, tactile surfaces that feel almost physical.
This guide breaks down neumorphic design from basic box-shadow mechanics to real-world button, card, and form implementations.
You’ll learn the CSS properties that make it work, accessibility pitfalls to avoid, and when soft UI actually makes sense for your projects.
What is CSS Neumorphism
CSS neumorphism is a design technique that creates soft, extruded UI elements using dual shadows.
The style makes buttons, cards, and interface components appear pushed out from or pressed into the background surface.
Think of it as flat design meets subtle 3D depth.
Elements share the same background color as their container. Light and dark shadows on opposite sides create the illusion of physical form.
Michal Malewicz popularized this soft UI trend in late 2019. Since then, designers on Dribbble and Behance have created thousands of neumorphic interface concepts.
The aesthetic works best for minimalist design projects where visual depth matters more than high contrast.
CSS Neumorphism Examples
Neumorphism Menu By Wouter
See the Pen
Neumorphism menu by Wouter (@wouterXD)
on CodePen.
Fingerprint scan
See the Pen
Fingerprint scan by Cassie Evans (@cassie-codes)
on CodePen.
Animation Effects CSS3 Neumorphism
See the Pen
Creative CSS Animation Effects CSS3 Neumorphism by samuel garcia (@sam_garcia2)
on CodePen.
Neumorphism Gradient Loader
See the Pen
Neumorphism Gradient Loader by samuel garcia (@sam_garcia2)
on CodePen.
Neumorphism Login Form
See the Pen
Neumorphism Login Form by Ricardo Oliva Alonso (@ricardoolivaalonso)
on CodePen.
Neumorphic Presentation Design by Oleksii Kolosov
Nuemorphic Table By Abhishek Anil Deshmukh
See the Pen
Nuemorphic Table by Abhishek Anil Deshmukh (@abhishek-deshmukh)
on CodePen.
Neumorphic Dominoes
See the Pen
Neumorphic Dominoes by P (@petegarvin1)
on CodePen.
Neumorphism Icon Set by Agente
Neumorphism Toggle
See the Pen
Neumorphism Toggle by Aaron Iker (@aaroniker)
on CodePen.
Satisfying Button (Neumorphism)
See the Pen
Satisfying Button (Neumorphism) by Yuhomyan (@yuhomyan)
on CodePen.
Neumorphic Action Menu Animation by Vadim Demenko
Neumorphic Calculator By February
See the Pen
Neumorphic Calculator by February (@fbry)
on CodePen.
Neuburger
See the Pen
Neuburger by Jacob Lockett (@HuntingHawk)
on CodePen.
Neumorphic Shadow Variations – Depth
See the Pen
Neumorphic Shadow Variations – Depth by Geoff Graham (@geoffgraham)
on CodePen.
Neumorphic Buttons
See the Pen
Neumorphic Buttons by Sikriti Dakua (@dev_loop)
on CodePen.
Neumorphic Brick Phone
See the Pen
Neumorphic Brick Phone by Jon Kantner (@jkantner)
on CodePen.
Instagram Neumorphic Redesign Concept
Neumorphism Accessibility Example By Michael J. Fordham
See the Pen
Neumorphism Accessibility Example by Michael J. Fordham (@michael-j-fordham)
on CodePen.
Neumorphism On-off
See the Pen
Neumorphism On off by Arslan Khan (@Arslan777)
on CodePen.
Neumorphic Text Magic
See the Pen
Editable Neumorphic Text by Adam Kuhn (@cobra_winfrey)
on CodePen.
Weather App Gone Neumorphic
See the Pen
Neumorphism Weather App by Travis Williamson (@travisw)
on CodePen.
Gettin’ Dark with Neumorphic Circle Loader
See the Pen
Dark Neumorphism Circle Loader by Robbe Huybrechts (@Robinskie)
on CodePen.
Those Neumorphic Tabs Tho!
See the Pen
Neumorphic tabs by Michael Burridge (@mburridge)
on CodePen.
Neomorphism’s Best Bits by Damir
See the Pen
A bit of neumorphism by Damir (@drovosek2703)
on CodePen.
Fitbit’s Neumorphic Makeover
See the Pen
Neumorphic Fitbit UI by Jon Kantner (@jkantner)
on CodePen.
Buttons So Real, They’re Surreal
See the Pen
Quite realistic buttons by Steffen Gramberg (@minustalent)
on CodePen.
White Neumorphism Buttons, Baby!
See the Pen
Neumorphism Buttons by zeynep (@zeynepozdem)
on CodePen.
Neumorphism’s Colorful Modal
See the Pen
Neumorphism study (change color with dot, best in Chrome) by Scott Kellum (@scottkellum)
on CodePen.
Neumorphic Forms, Anyone?
See the Pen
Neomorphic Form by Swapnil (@swapnet)
on CodePen.
That Neumorphism Button
See the Pen
Neumorphism Button by Naoya (@nxworld)
on CodePen.
Web OP-1: Neumorphism’s Jam
See the Pen
Web OP-1 by Līva Raita (@liva_raita)
on CodePen.
Neumorphism Calendar with that Gradient Glow
Neumorphism 101: CSS Style
See the Pen
Neumorphism: The CSS way! by Shounak (@dasshounak)
on CodePen.
Blowing Bubbles, Neumorphic Style
See the Pen
Neumorphic Bubbles by Aniket Kudale (@aniketkudale)
on CodePen.
Neumorphic Loading Goodness
See the Pen
Neumorphic Loading Animation by Ruphaa Ganesh (@ruphaa)
on CodePen.
Radio Waves the Neumorphic Way
See the Pen
Neumorphic Radio by halvves (@halvves)
on CodePen.
Music Player with Neumorphic Vibes
See the Pen
Music Player Neumorphic (Soft UI) Style by Dilum Sanjaya (@dilums)
on CodePen.
Neumorphism Meets Materialize CSS
See the Pen
Neumorphism with Materialize CSS example by Adrian Bece (@AdrianBece)
on CodePen.
Neumorphic Design: The HTML, CSS, and JavaScript Flair
Testing the Neumorphic Waters
See the Pen
neumorph test by victor (@VictorUx)
on CodePen.
Catch the Neumorphic Waves
See the Pen
neumorphism waves by Kilian So (@kilianso)
on CodePen.
The Soft-UI Button Groove
See the Pen
Soft-UI Button Pattern by Tyler Scott Williams (@ogdenstudios)
on CodePen.
Seeking with the Neumorphic Search Bar
See the Pen
Neumorphism Search Bar by Tran Dinh Trung (@tdtrung17693)
on CodePen.
Paying with Neumorphic Elegance
See the Pen
Neumorphism by Angius (@Angius)
on CodePen.
Squishing the Neumorphic Way
See the Pen
Neumorphism Button – Squishy by Ahmad Emran (@ahmadbassamemran)
on CodePen.
Socializing with Neumorphic Icons
See the Pen
Neumorphism – Animated Social Icons by Jitendra Nirnejak (@nirnejak)
on CodePen.
Glowing Neumorphism Circles
Press That Neumorphic Button
Social Media Icons Get Neumorphed
Loading… But Make It Neumorphic
How Does Neumorphism Work in CSS
Neumorphic effects rely on the box-shadow property to simulate light hitting a surface.
You need two shadows working together: one lighter than the background, one darker.
The Role of Box-Shadow in Neumorphism
The CSS Box Shadow Generator approach uses offset values, blur radius, and shadow color to build depth.
Positive offsets push shadows down-right; negative offsets push them up-left.
Light and Dark Shadow Combination
Every neumorphic element needs a highlight shadow (lighter than background) and a shadow effect (darker than background).
This dual shadow technique creates the raised or pressed appearance that defines soft UI styling.
Background Color Requirements
Pure white (#FFFFFF) and pure black (#000000) won’t work for neumorphism.
You need room to go lighter AND darker. Off-white tones like #e0e5ec or light grays around #d4d8dd give you that flexibility.
The element background must match the container background exactly for the effect to work.
CSS Neumorphism Button Examples
Buttons are the most common neumorphic components. The tactile appearance makes them feel clickable.
Flat Button Style
Flat neumorphic buttons appear raised from the surface with soft outer shadows on two sides.
Standard CSS button hover effects translate well here, just adjust shadow intensity on interaction.
Pressed Button Effect
Switch from box-shadow to box-shadow: inset and the button looks pushed into the background.
Use this for active states and toggle buttons that need to show “on” status.
Hover State Transitions
Add transition: all 0.3s ease for smooth shadow changes between states.
Reduce shadow distance and blur on hover to create a subtle “pressing down” feel before the full click.
CSS Neumorphism Card Examples
CSS cards benefit heavily from neumorphic treatment. The soft shadows add depth without harsh borders.
Concave Card Design
Concave cards use inset shadows to appear carved into the background surface.
Good for content wells, input containers, and secondary information panels.
Convex Card Design
Convex cards push outward with standard (non-inset) dual shadows.
This raised appearance works for primary content blocks, product card designs, and featured sections.
Card with Inner Content
Combine convex outer cards with concave inner sections for layered depth.
A raised card containing a pressed input field creates clear visual hierarchy without borders or color changes.
CSS Neumorphism Form Elements
CSS forms present the biggest usability challenge for neumorphism. Low contrast can hurt accessibility.
Input Field Styling
Neumorphic CSS input text fields typically use inset shadows to appear pressed into the surface.
Add a subtle inner glow on focus to indicate the active field clearly.
Checkbox and Toggle Switches
Custom CSS checkboxes and CSS toggle switches look stunning in neumorphic style.
The “on” state uses convex shadows; “off” uses concave or flat styling.
Radio Button Design
Circular neumorphic radio buttons need higher border-radius values (50% for perfect circles).
The selected state should have a clearly visible inner dot or color change, not just shadow shifts, for web accessibility compliance.
CSS Neumorphism Navigation Components
Navigation elements need extra care in neumorphic design. Users must instantly recognize clickable areas.
Tab Bar Design
CSS tabs work well with convex styling for inactive states and pressed/inset shadows for the active tab.
Keep tab labels high contrast against the soft background.
Sidebar Menu Styling
Neumorphic CSS menus and Bootstrap sidebars benefit from subtle raised menu items with pressed active states.
Add hover transitions to signal interactivity.
Bottom Navigation
Mobile bottom nav bars suit neumorphism perfectly. Icon buttons with soft shadows feel tactile on touch devices.
The selected icon should use inset shadows or a subtle color shift for clear feedback.
Neumorphism vs Skeuomorphism vs Flat Design
Understanding where neumorphism fits helps you choose the right approach for your project.
Key Visual Differences
- Skeuomorphism: Realistic textures, gradients, detailed shadows mimicking real objects (early iOS design)
- Flat design: No shadows, minimal depth, solid colors, clean geometric shapes
- Neumorphism: Soft dual shadows, monochromatic palette, subtle 3D depth without realistic textures
When to Use Each Style
Flat design for maximum color contrast and accessibility. Skeuomorphism for nostalgic or highly branded experiences.
Neumorphism for modern, premium interfaces where aesthetics matter and you can ensure sufficient contrast.
CSS Properties for Neumorphism
Three CSS properties do most of the work: box-shadow, border-radius, and background-color.
Box-Shadow Values Explained
Standard neumorphic shadow syntax: box-shadow: 8px 8px 15px #a3b1c6, -8px -8px 15px #ffffff;
First value pair (positive): dark shadow. Second pair (negative): light highlight. Blur radius controls softness.
Border-Radius Settings
The CSS Border Radius Generator helps dial in rounded corners. Neumorphism favors generous radius values, typically 12px to 50px depending on element size.
Sharper corners look less “soft” and break the aesthetic.
Background and Color Selection
Stick to muted, desaturated colors. Light grays (#e0e0e0 to #f0f0f0) are safest.
Pastels work but require careful shadow color calculation. Use a CSS Gradient Generator for subtle background variations.
Neumorphism Accessibility Considerations
Web accessibility checklist items often conflict with pure neumorphic design. Plan for this early.
Contrast Ratio Problems
WCAG guidelines require 4.5:1 contrast for normal text. Soft shadows alone don’t provide enough distinction between elements.
Many neumorphic designs fail automated accessibility testing.
Improving Visibility for Users with Visual Impairments
Add subtle borders (1px solid with slight color variation) to define element boundaries.
Use ARIA labels generously. Ensure text inside neumorphic elements has high contrast against the background, not just shadow-defined edges.
Neumorphism CSS Generators and Tools
Manual shadow calculation gets tedious. Online generators speed up the process significantly.
Online Generator Options
- Neumorphism.io: The original and most popular soft UI generator
- CSS-Tricks examples: Code snippets with detailed explanations
- CodePen collections: Hundreds of ready-to-use neumorphic components
Figma, Adobe XD, and Sketch plugins also generate neumorphic styles for design mockups.
How to Customize Generated Code
Generator output needs tweaking. Adjust shadow distance for your element size, modify blur for softer/sharper edges.
Test generated code with a CSS Beautifier to clean up formatting before production use.
Dark Mode Neumorphism
Dark backgrounds complicate neumorphism. You can’t go “lighter” than white for highlights.
Shadow Adjustments for Dark Backgrounds
Use very subtle highlight shadows (just slightly lighter than background) paired with deeper dark shadows.
The effect becomes more about shadows than highlights. Some designers add faint colored glows instead of white highlights.
Color Palette Changes
Dark gray backgrounds (#2d2d2d to #3a3a3a) work better than pure black.
Consider using CSS glassmorphism for dark mode interfaces instead. It handles dark backgrounds more gracefully.
Performance Considerations
Multiple box-shadows on many elements can slow down rendering, especially on mobile devices.
Shadow Rendering Impact
Each shadow requires browser paint operations. Complex neumorphic interfaces with 50+ shadowed elements may cause jank during scroll.
Test on mid-range Android devices, not just your MacBook.
Mobile Device Optimization
Use media queries to simplify or remove neumorphic effects on smaller screens.
Consider will-change: transform on animated neumorphic elements. Reduce shadow blur radius on mobile for better performance without losing the soft UI look entirely.
FAQ on CSS Neumorphism Examples
What is neumorphism in CSS?
Neumorphism is a soft UI design technique using dual box-shadows to create extruded or pressed effects. Elements appear to push out from or sink into the background. The style combines flat design simplicity with subtle 3D depth.
How do you create a neumorphic effect with CSS?
Apply two box-shadows: one light (offset top-left) and one dark (offset bottom-right). Match the element’s background color to its container. Add generous border-radius for softness. The dual shadow creates the raised appearance.
What CSS properties are needed for neumorphism?
Three properties matter most: box-shadow for depth, border-radius for rounded corners, and background-color matching the parent container. Optional: transition properties for hover states and CSS animation for interactive feedback.
Why does neumorphism require specific background colors?
Neumorphism needs room for both lighter and darker shadows. Pure white can’t go lighter; pure black can’t go darker. Off-white grays like #e0e5ec provide flexibility for shadow contrast in both directions.
Is neumorphism bad for accessibility?
It can be problematic. Low contrast between elements challenges users with visual impairments. WCAG compliance requires additional measures like subtle borders, high-contrast text, and proper accessible forms implementation to meet standards.
Can you use neumorphism with dark mode?
Yes, but it’s trickier. Dark backgrounds limit highlight options. Use subtle light shadows paired with deeper darks. Dark grays (#2d2d2d) work better than pure black. Some designers prefer CSS blur effects for dark themes.
What UI elements work best with neumorphism?
Buttons, cards, and toggle switches suit neumorphism well. CSS loaders and CSS progress bars also look great. Avoid using it on text-heavy sections or complex navigation where clarity matters most.
Does neumorphism affect website performance?
Multiple box-shadows increase browser paint operations. Heavy use across many elements can cause scroll jank, especially on mobile. Test on mid-range devices and consider simplifying effects for mobile-first design approaches.
What tools generate neumorphic CSS code?
Neumorphism.io is the most popular generator. CodePen hosts thousands of examples. Design tools like Figma and Adobe XD have plugins for creating neumorphic mockups before coding.
Is neumorphism still a relevant design trend?
It’s evolved from hype to selective use. Smart designers apply it sparingly for micro-interactions and accent elements rather than entire interfaces. The soft UI aesthetic remains popular for dashboard and app designs.
Conclusion
These CSS neumorphism examples show what’s possible when you master dual box-shadow techniques. The soft UI aesthetic adds visual depth without the heaviness of skeuomorphic design.
Start with buttons and cards. They’re forgiving and immediately rewarding.
Test your implementations on actual devices. Shadow rendering hits mobile performance harder than you’d expect.
Don’t ignore accessibility. Add subtle borders, maintain text contrast, and use proper accessible typography throughout your neumorphic interfaces.
The best neumorphic designs use restraint. A few well-placed soft UI elements create more impact than an entire page drowning in shadows.
Grab code from neumorphism.io, customize it, and make it yours.
