Generate soft UI neumorphism CSS effects online free with a live preview. Adjust color, size, radius, distance, and intensity to create realistic extruded and pressed button styles.
Neumorphism's distinctive raised-surface effect requires two precisely calibrated box shadows - one lighter than the background, one darker - at opposite corners. Getting the values right manually requires understanding the relationship between background color and shadow colors.
Generate CSS for neumorphic (soft UI) button and card designs - the style that appears pressed into or raised from the background surface - with adjustable shadow values and instant CSS output.
Design neumorphic button components for design system experiments, create soft UI card layouts for dashboards, build calculator or control panel UIs with the raised-button aesthetic, design music player controls with pressed-state styles, create toggle switches and knob controls, and experiment with soft UI design trends.
The most common question is about accessibility. Neumorphic designs often fail contrast ratio requirements - the subtle shadow differences that define the style are hard for users with low vision to distinguish. Use neumorphism as an aesthetic layer on top of accessible component structure, not as the sole indicator of interactive elements.
Adjust size, radius, distance, blur, and color.
Toggle between flat, concave, convex, and pressed styles.
See the neumorphic element update as you adjust sliders.
Copy the generated CSS to use in your project.
Common questions about this tool and how to use it.
Neumorphism (New Morphism, or Soft UI) is a design style where elements appear to extrude from or press into the background surface - creating a raised or recessed appearance. Achieved through two box shadows of opposite tones (one lighter, one darker than the background) at opposite corners. Popularized around 2020 as an evolution from flat and material design - combining flat design's minimalism with skeuomorphism's tactile feel.
Neumorphism: elements appear to be part of the background surface - raised or recessed. Effect created with light and dark box shadows. Works best on single-color backgrounds. Glassmorphism: elements appear as floating glass panels above the background. Effect created with transparent background and backdrop-filter blur. Works best on colorful or image backgrounds. Both are aesthetic trends rather than accessibility-first design approaches.
Two box shadows are required - one lighter than the background (top-left) and one darker (bottom-right). For a #e0e5ec background: box-shadow: 6px 6px 12px #b8bec7, -6px -6px 12px #ffffff; - creates a raised appearance. For a pressed state (inset): box-shadow: inset 6px 6px 12px #b8bec7, inset -6px -6px 12px #ffffff; The shadow colors must be derived from the background color for the illusion to work.
Neumorphic designs have inherently low contrast - the visual differentiation between interactive and non-interactive elements, or between active and inactive states, relies on subtle shadow differences that many users cannot distinguish. WCAG 2.1 requires a 3:1 contrast ratio for UI component boundaries (4.5:1 for text). Neumorphic shadows typically fail these ratios. The pressed vs raised state distinction is also non-obvious for users with low vision.
Neumorphism requires a specific background color - typically a mid-range gray (#e0e5ec is the classic example). The two shadows are calculated as lighter and darker versions of the base background. Pure white (#ffffff) backgrounds cannot have a lighter shadow. Pure black backgrounds cannot have a darker shadow. The sweet spot is gray in the range #d0d0d0 to #f0f0f0. Colored neumorphism works but requires calculating the tinted shadow variants correctly.
Leave your email so we can prioritize similar tools and updates.
Trending tools will appear as visitors explore the catalog.
Your recently visited tools will show up here.