CSS Neumorphism Generator

Q: Why can't I use a white or black background?

Neumorphism requires a highlight (lighter than bg) and a shadow (darker than bg). Pure white or black backgrounds prevent one of these two components from being visible.

Q: What is the best background color for Neumorphism?

Off-whites and light greys like #e0e5ec work best because they provide enough range to show both white highlights and dark shadows.

Q: Is Neumorphism accessible?

Low contrast borders can be an accessibility issue. Always ensure the content (text/icons) inside the element has high contrast against the background.

Q: How do I make a pressed button effect?

Use the 'Pressed' shape option. This applies an 'inset' box-shadow, creating the illusion that the element is recessed into the surface.

Tools

CSS Neumorphism Generator

Add to Favorites Remove from Favorites

Color (Pick non-white)

Dimensions

Size

Radius

Shadow

Distance

Intensity

Blur

Shape Type

Light Source

Copy CSS

About the CSS Neumorphism Generator

Neumorphism (or Soft UI) is a popular design trend that combines flat design with skeuomorphism. It creates a soft, extruded plastic look where elements appear to be part of the background rather than floating on top of it. Achieving this look requires precise manipulation of multiple CSS box-shadows—one light and one dark—to simulate light hitting the object.

Writing this CSS manually involves complex calculations to get the shadow colors, blur radius, and offsets just right. Our generator solves this by doing the math for you. You pick a base color, and the tool automatically calculates the highlight and shadow colors needed to create a realistic 3D effect.

The tool supports all major Neumorphic shapes: Flat (standard card), Concave and Convex (curved surfaces), and Pressed (inset look, perfect for active buttons). It generates clean, cross-browser compatible CSS that you can copy and paste directly into your project.

How to Use the Tool

Pick a Color: Neumorphism works best on off-white or light grey backgrounds. Pure white or black won't work well because you need room for both highlights and shadows.
Adjust Shadows: Use the "Distance" slider to change how "tall" the element looks. Use "Blur" to soften the edges and "Intensity" to make the shadows deeper.
Select Shape: Toggle between Flat, Concave, Convex, or Pressed to see how the effect changes the feel of the element.
Light Source: Change the direction of the light to match your design system.
Copy Code: Grab the generated CSS and apply it to your HTML elements.

Frequently Asked Questions

Why can't I use a white or black background?

Neumorphism relies on contrast. To create a 3D effect, you need a lighter shadow (highlight) on one side and a darker shadow on the other. If your background is pure white (#FFF), you cannot create a lighter highlight. If it is pure black (#000), you cannot create a darker shadow.

What is the best background color for Neumorphism?

Light greys, soft blues, and cream colors work best. A very popular choice is #e0e5ec, which is the default color of this generator. It allows for crisp white highlights and soft grey shadows.

Is Neumorphism accessible?

It can be challenging. Because the contrast between the element and the background is low, it may be difficult for visually impaired users to see the boundaries of buttons or cards. Always ensure your text and icons inside the element have high contrast ratios to maintain accessibility.

How do I make a pressed button effect?

Select the "Pressed" option in the "Shape Type" section. This switches the CSS from box-shadow to box-shadow: inset, making the element look like it has been pushed into the surface.