What are the four neumorphism shape types?

Flat: both shadows outside (default raised look). Concave: radial gradient makes surface appear dipped in. Convex: radial gradient makes surface appear raised. Pressed/Inset: shadows moved inside using inset keyword, creating a pressed-in appearance.

When should I use neumorphism?

Neumorphism works best for: dashboard widgets, card components, calculator UIs, music player controls, and settings panels. Less suitable for text-heavy content, accessibility-critical interfaces, or small elements.

Neumorphism Soft UI Generator

Create soft UI neumorphism CSS effects with customizable dual shadows and 4 shape types.

4 shape typesLive previewHSL auto-calc

① Pick a base color & shape ② Adjust shadow distance & blur ③ Copy the CSS

Soft UI

Color presets:

Background color

light#ffffff

dark#b0bdcf

Element size (px)

150px

Border radius (px)

16px

Shadow distance (px)

10px

Blur radius (px)

20px

Shadow intensity

15%

CSS Code

.neumorphic {
  background: #e0e5ec;
  border-radius: 16px;
  box-shadow: 10px 10px 20px #b0bdcf, -10px -10px 20px #ffffff;
  /* light: #ffffff | dark: #b0bdcf */
}

What is Neumorphism?

Neumorphism (Soft UI) is a UI design trend that creates extruded plastic-like surfaces by combining flat design and skeuomorphism. It uses two carefully crafted dual box-shadows — one light (highlight) and one dark (shadow) — applied with opposite offsets to the same element. The element color closely matches the background, giving a "pushed out from the surface" look. Key CSS: box-shadow: 10px 10px 20px #darkColor, -10px -10px 20px #lightColor. For the pressed variant, use the inset keyword. For concave and convex shapes, add a radial-gradient background. The shadow colors are derived from the base by adjusting HSL lightness by ±15–25%.

Frequently Asked Questions

Neumorphism (Soft UI) is a design trend combining flat design and skeuomorphism. Elements appear extruded from the background using dual box-shadows — a light highlight on the top-left and a dark shadow on the bottom-right. The element must be the same color as the background for the effect to work.

Neumorphism uses two box-shadows with opposite offsets: one lighter than the background (highlight) and one darker (shadow). Example: box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff. The element background must match the page background for the extruded effect.

Flat: both shadows on outside (default raised look). Concave: radial gradient makes the surface appear dipped in. Convex: radial gradient makes the surface appear raised. Pressed/Inset: shadows are moved inside using inset keyword, creating a pressed-in appearance.

Mid-tones work best — neither too dark nor too light. Pure white (#fff) or pure black (#000) backgrounds limit the contrast range. Colors around #e0e5ec, #d4dae4, or #2d3436 are popular starting points. The light and dark shadow colors are calculated as percentage lighter/darker than the base.

Neumorphism has known accessibility issues: low contrast between elements and background can make them hard to distinguish for users with low vision. The WCAG 2.1 contrast ratio requirement of 3:1 for non-text elements is often not met. Always provide clear focus states and ensure interactive elements are distinguishable.

Neumorphism works best for: dashboard widgets, card components, calculator UIs, music player controls, and settings panels. It is less suitable for: text-heavy content, accessibility-critical interfaces, complex navigation, or small elements where the shadow details are not visible.

For a given hex background: calculate the HSL lightness, then create a lighter version (+15-25% lightness) and darker version (-15-25% lightness). For #e0e5ec: light shadow → #ffffff or similar, dark shadow → #b8bec7 or similar. This tool calculates the shadows automatically from your chosen color.

What is Neumorphism?

Frequently Asked Questions

Explore Our Network