Neumorphism CSS Generator

How to Use the Neumorphism Generator

1. Pick a base color — use the color picker to select your background/base color. Mid-tone, muted colors work best.
2. Choose a shape — select Flat, Concave, Convex, or Pressed using the chips at the top.
3. Adjust the sliders — control size, border radius, shadow distance, blur, and intensity.
4. Apply a preset — click Button, Card, Input, Toggle, or Circle to jump to common configurations.
5. Copy the CSS — copy the generated box-shadow values for use in your project.

What Is Neumorphism?

Neumorphism (a portmanteau of "new" and "skeuomorphism") is a design style coined around 2020 that creates a soft, plastic-like appearance using carefully placed CSS box-shadow values. Unlike the glossy surfaces of skeuomorphism or the flat colors of flat design, neumorphism gives elements a subtle three-dimensional look as if they are slightly raised from or pressed into the background surface.

The key insight of neumorphism is that the element, the light shadow, and the dark shadow all derive from the same base color — just lighter and darker. This creates a monochromatic, cohesive feel where UI elements look as if they are made from the same material as the page itself.

How Shadow Colors Are Calculated

Given a base hex color, the neumorphism algorithm works as follows: the hex color is converted to HSL (hue, saturation, lightness), and then two derived colors are created — one with increased lightness (the highlight shadow, top-left) and one with decreased lightness (the shadow color, bottom-right). The intensity slider controls how far these colors deviate from the base. Higher intensity creates more pronounced shadows that are easier to see; lower intensity creates a more subtle, refined look.

Shape Types Explained

• Flat — the standard neumorphic raised shape. Light shadow top-left, dark shadow bottom-right. The surface appears flat but raised from the background.
• Concave — adds an inward gradient (dark-to-light, top-to-bottom) to the flat shape, making the center appear to sink in like a shallow bowl.
• Convex — adds an outward gradient (light-to-dark, top-to-bottom) to the flat shape, making the center bulge outward like a dome.
• Pressed — reverses the inset shadows to simulate a button that has been pushed in, the opposite of flat.

Choosing the Right Base Color

The best neumorphic colors are mid-range grays and pastel tones in the lightness range of 75–90% in HSL. Pure white (#ffffff) means the light shadow is invisible, and pure black means the dark shadow is invisible. Warm grays like #e0d8d0, cool grays like #e0e5ec, and soft pastels like #d4e8d4 all work beautifully. Highly saturated colors can produce harsh-looking shadows, so reduce saturation if the shadows look too colorful.

Accessibility Warning

Neumorphism has been criticized for accessibility issues. The low-contrast shadow-based visual language is difficult to perceive for users with low vision or contrast sensitivity disorders. When using neumorphism in production: always add clear focus states with high-contrast outlines for keyboard navigation, use additional visual indicators (icons, labels) on interactive elements, test your design with WCAG contrast checkers, and consider offering a high-contrast mode. See the Color Contrast Checker to verify your choices meet WCAG 2.1 AA standards.

Neumorphism vs. Glassmorphism

Both trends emerged in the same era, but they serve different aesthetics. Neumorphism works on flat monochromatic backgrounds with no transparency, creating a physical, tactile feel. Glassmorphism requires a colorful background to blur, creating an airy, light, translucent feel. Neumorphism struggles in dark mode because the shadow contrast becomes very subtle, while glassmorphism can look stunning in dark interfaces. Try the Glassmorphism Generator to compare. For more CSS tools, see the CSS Specificity Calculator and Cubic Bezier Easing Editor.