Neumorphism Generator

What This Neumorphism Generator Does

Neumorphism, sometimes called soft UI, makes an element look extruded from the surface behind it instead of floating above it. The trick is simple: the element shares the same background color as its parent, and two soft shadows do all the work. One shadow is lighter than the surface and one is darker, so the shape appears lit from one side and shaded from the other.

This generator derives both shadow colors from a single background color you pick, then gives you sliders for distance, intensity, blur, and border radius, plus four shape modes. The preview on the right updates in real time, and the generated CSS below it is ready to paste into a stylesheet. Everything runs in your browser, so no settings are uploaded anywhere.

How to Use It

1. Pick the background color. The element and the preview canvas share this color, which is what makes the effect work. Soft grays such as #e0e5ec are the classic choice.
2. Choose a shape: flat, concave, convex, or pressed. The flat shape is the standard raised look you see on soft UI cards and buttons.
3. Tune the distance slider to control how far the shadows are offset, and intensity to control how much lighter and darker they are compared to the surface.
4. Adjust the blur to keep the shadows soft, and the border radius to match the corner language of your design.
5. Copy the generated CSS with the copy button, or download it as a file. Use Reset to return every control to its starting value.

The Four Shapes Explained

Flat keeps the surface a solid color and applies both shadows outside the element. This is the raised look that most people mean when they say neumorphism, and it suits cards, containers, and inactive buttons.

Concave keeps the outer shadows but adds a subtle background gradient that runs darker at the top-left and lighter at the bottom-right, so the surface reads as a shallow dish. Convex reverses that gradient, making the surface look like it bulges toward the light. Both are useful for giving large panels a sense of volume without adding borders.

Pressed flips the shadows to inset, so the element looks sunk into the surface. It is the natural active state for a soft UI button, and it pairs well with a raised resting state using the same settings.

Why Two Shadows Work

Standard box shadows only darken. Neumorphism needs both a highlight and a shade, so the generator emits a two part box-shadow with matching offsets: one light shadow toward the top-left and one dark shadow toward the bottom-right. The light shadow is the background color mixed toward white, and the dark shadow is the same color mixed toward black. The intensity slider controls how far each mix travels, which is why a higher intensity reads as deeper relief while a low intensity stays subtle.

Keep the ratio between distance and blur gentle. When the blur is much larger than the distance the shape floats, and when the distance is larger than the blur, the effect turns noisy. A distance of about half the blur radius is a good starting point, and the defaults here follow that rule.

A Note on Accessibility

Soft UI is intentionally low contrast, and low contrast shadows can make interactive controls hard to perceive. Use neumorphism for decoration and depth, but keep button labels clearly readable and consider a visible border or icon on controls that must stay obvious. You can check text and surface pairings with the Color Contrast Checker before shipping.

Related Tools

Neumorphism is one style in a family of CSS generators. Build layered depth with the CSS Box Shadow Generator, create translucent panels with the CSS Glassmorphism Generator, smooth your corners with the CSS Border Radius Generator, and build matching backdrops with the CSS Gradient Generator. If you need a matching palette, start from the Color Palette Generator.