🎛️

Neumorphism Generator

LOCAL · Browser-Only

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 recipe

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

What is neumorphism?

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.

How does it work technically?

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.

What are the shape types?

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).

How do I make a pressed or inset neumorphism effect?

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.

Why does the soft UI effect disappear on a white background?

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

Box shadow css

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

🪟

Glass effect css

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

🔘

Button style generator

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

CSS

Neumorphism css

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

◻️

Border radius tool

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

🎬

Keyframe animation generator

Free online CSS animation generator - generate CSS keyframe animations visually

✂️

Clip path polygon

Free online CSS clip path generator - create custom CSS clip-path shapes visually

▦

Css grid builder

Free online CSS grid generator - visual CSS grid layout builder with live preview and code export

Keep reading: CSS Cheat Sheet and hash algorithms reference. Doing this in code instead? See the utility endpoints.