Design

🎛️

Neumorphism Generator

Generate soft UI neumorphic CSS styles

Presets

Background Color

#ffffff

#b8bdc4

Quick:

Shape

Parameters

Intensity

Distance

Blur

Radius

Size

Light Direction

Live Preview

Neumorphism

Shadow Values

Light Shadow

-10px -10px 20px #ffffff

Dark Shadow

10px 10px 20px #b8bdc4

CSS Code

.neumorphic {
  border-radius: 16px;
  background: #e0e5ec;
  box-shadow:
    10px 10px 20px #b8bdc4, -10px -10px 20px #ffffff;
}

React / Inline Style

style={{ 
  borderRadius: '16px',
  background: '#e0e5ec',
  boxShadow: '10px 10px 20px #b8bdc4, -10px -10px 20px #ffffff'
}}

Tailwind

rounded-[16px] bg-[#e0e5ec] shadow-[10px_10px_20px_#b8bdc4,_-10px_-10px_20px_#ffffff]

Share to Community

Was this tool helpful?

What is Neumorphism Generator?

Free online neumorphism generator to create the neumorphism (soft UI) CSS effect with a visual generator.

Adjust background color, shadow intensity, blur radius, and shadow distance to create raised, inset, or pressed-state effects. Build a soft UI button, a neumorphic card, or a pressed input field, switch the light direction, and copy the dual box-shadow CSS. Use the pressed mode to generate inset box-shadow for active states. The effect needs a muted, non-white background to read correctly. Preview different element shapes (flat, concave, convex, pressed). No signup required.

How to Use Neumorphism Generator

1Set the background color (use muted colors, not pure white)
2Adjust shadow intensity, blur, and distance
3Choose the shape type (flat, concave, convex, pressed)
4Copy the CSS box-shadow and background code

Frequently Asked Questions

Neumorphism (new + skeuomorphism) is a design style that creates soft, extruded shapes using subtle shadow pairs - one light shadow and one dark shadow on the same element. It gives a 'pressed into' or 'raised from' the background look.

It uses two box-shadows: one light-colored (highlight, offset top-left) and one dark-colored (shadow, offset bottom-right). The background must be a muted, non-white color for the effect to work.

Flat (standard raised element), Concave (slightly curved inward, using gradient), Convex (slightly curved outward, using gradient), and Pressed (inset shadows, like a button being pushed).

Switch to the Pressed shape, which turns the box-shadow into box-shadow: inset so the element looks recessed into the surface. This is the standard look for active buttons and input fields. Adjust distance and blur to control how deep the press appears.

Neumorphism relies on a light shadow and a dark shadow derived from the surface color. On pure white the light shadow has nowhere to show, so the effect flattens. Use a muted gray or tinted background and the dual shadows become visible.

Share this tool

Related Tools

SHD

CSS Box Shadow Generator

Free online CSS box shadow generator - create beautiful CSS box shadows with a visual builder and live preview

🪟

Glassmorphism Generator

Free online glassmorphism generator - create glass-effect CSS styles with blur and transparency

🔘

CSS Button Generator

Free online CSS button generator - generate styled CSS buttons with hover effects

CSS

AI CSS Generator

Free online AI CSS generator - browse 25+ CSS effects or generate custom styles with AI

◻️

Border Radius Generator

Free online border radius generator - generate CSS border-radius values with visual editor

🎬

CSS Animation Generator

Free online CSS animation generator - generate CSS keyframe animations visually

What is Neumorphism Generator?

Free online neumorphism generator to create the neumorphism (soft UI) CSS effect with a visual generator.

Frequently Asked Questions

It uses two box-shadows: one light-colored (highlight, offset top-left) and one dark-colored (shadow, offset bottom-right). The background must be a muted, non-white color for the effect to work.

Flat (standard raised element), Concave (slightly curved inward, using gradient), Convex (slightly curved outward, using gradient), and Pressed (inset shadows, like a button being pushed).