Generator Tools

CSS Neumorphism Generator

Build neumorphic soft UI surfaces with a live preview. Tune base color, distance, intensity, blur, shape and copy CSS, React, or Tailwind.

Quick presets

Each preset replaces every setting. Tweak any slider afterward.

Live preview

Soft surface

The preview canvas uses the same background as your surface so the shadows blend in the way they will on your site. Place the generated rule on a page with that same background color for the embossed look.

CSS output

.neumorphism {
  background: #e0e5ec;
  border-radius: 56px;
  box-shadow: -18px -18px 36px #bec3c9, 18px 18px 36px #e5e9ef;
}

Apply the .neumorphism class to any element. Use the same background-color on the parent so the shadows read as soft embossing instead of a floating card.

React inline style

const neumorphismStyle = {
  background: "#e0e5ec",
  borderRadius: "56px",
  boxShadow: "-18px -18px 36px #bec3c9, 18px 18px 36px #e5e9ef",
};

Drop the object straight into the style prop of any React component.

Tailwind v3+ classes

bg-[#e0e5ec] rounded-[56px] shadow-[-18px_-18px_36px_#bec3c9,_18px_18px_36px_#e5e9ef]

Uses Tailwind arbitrary values, supported in Tailwind v3 and later. Underscores stand in for spaces inside brackets.

Surface color

Neumorphism works best on mid-tone, low-saturation backgrounds because the soft shadows need both lighter and darker tints to show on either side.

Background color

Try #e0e5ec for the classic light look or #1f2540 for dark soft UI.

Surface shape

Convex bulges out, concave dips in, pressed looks pushed in. Flat and level skip the inner gradient.

Light source

Top-left is the most common convention. The level shape uses an even shadow on both sides and ignores this setting.

Geometry

Size only affects the live preview. Border radius is included in the copied CSS.

Preview size240px

Affects only the preview canvas. Not exported.

Border radius56px

Use a value around half the size for a pill or 999px for a circle.

Shadow

Distance is how far each shadow offsets, intensity is how strongly the shadows tint the base, blur softens the edge.

Distance18px

Bigger values make the surface feel lifted further off the page.

Intensity15%

How far the shadow color shifts toward white or black from the base.

Blur36px

Higher blur gives a softer, more diffused glow.

Tip on accessibility: neumorphism is famously low-contrast. For interactive elements such as buttons or inputs, pair the soft surface with a clearly contrasting label or icon color, and consider an outline or color shift on focus so keyboard users can still see where they are.

How to use

Pick a preset like Classic gray or iOS light to start from a polished surface.
Set the surface background color. Mid-tone, low-saturation colors work best.
Choose a shape: flat, convex, concave, pressed, or level. Pick the light source corner.
Tune distance, intensity, blur, and border radius until the preview reads the way you want.
Click Copy CSS, Copy style, or Copy classes to paste the result into your project.

About this tool

CSS Neumorphism Generator builds soft UI surfaces, the embossed style that uses two opposite box-shadows on a single colored panel to fake a soft 3D highlight. Pick a base color, then tune the distance, intensity, blur, border radius, and surface shape (flat, convex, concave, pressed, or level). The light direction control flips the highlight between the four corners. The tool emits a ready-to-paste CSS rule for a .neumorphism class, a React inline style object, and a Tailwind v3+ arbitrary-value class chain, all derived from exactly the same values you see in the live preview. Convex and concave shapes layer a subtle linear-gradient on top of the base color so the panel reads as bulging out or dipping in. The pressed shape switches both shadows to inset for the classic pushed-in button look. Presets cover the most recognizable neumorphism looks, including a classic gray panel, an iOS-style light button, an indigo dark surface, a pastel mint card, a pressed button, and a soft pebble. The whole tool runs locally in your browser. The colors and parameters you choose never leave the page.

Free to use. Works in your browser. No signup, no login.

Related tools

CSS Neumorphism Generator

How to use

About this tool

You may also like

CSS Glassmorphism Generator

CSS Box Shadow Generator

CSS Gradient Generator

CSS Mesh Gradient Generator

CSS Border Radius Generator