Neumorphism

A cascade of soft rounded plates with directional light + shadow — pure CSS box-shadow neumorphism, parallax tilt on cursor, and a slow drift to keep the surface alive. Five palettes covering pearl, bone, silver, graphite, and obsidian.

neumorphism

Lazy-ui

Soft UI

Build softly.

A cascade of soft plates lit by a glow that orbits the rim — cursor steers the light and tilts the stack in 3D.

0px

Customize

Edit props; preview updates instantly.

Customize

Palette

Glow color

Layers

Spread

93px

Radius

42px

Angle

205°

Softness

67px

Depth

2.90

Glow

1.55

Speed

0.70

Props

Props accepted by Neumorphism.

Prop	Type	Default	Description
children	ReactNode	—	Content rendered above the cascade. Wrapped in `relative z-10 h-full w-full` so centered layouts resolve.
palette	"pearl" \| "bone" \| "silver" \| "graphite" \| "obsidian" \| "moonlight"	"pearl"	Color preset. Each preset bundles surface + highlight + shadow + a default rim-glow color — `pearl` matches the reference image, `bone` warms it toward cream, the last three flip the system to dark mode. `moonlight` runs cooler than `graphite`/`obsidian`.
colors	[string, string, string]	—	Custom palette as `[surface, highlight, shadow]`. Accepts hex, `rgb()`/`rgba()`. Overrides `palette`'s first three stops; the rim glow color stays from the palette unless `glowColor` is set.
glowColor	string	palette's default	Color of the orbital rim glow on each plate. Accepts hex, `rgb()`/`rgba()`. Overrides the palette's built-in glow stop — useful when you want to keep the surface tone but switch the lighting accent.
layers	number	6	Number of stacked plates (clamped 1–16). More plates = denser ridge field; fewer = a sparse staircase. Each new plate adds one ridge of cost.
spread	number	36	Spacing between consecutive plates in pixels. Wider spread reveals more of each plate's curve; narrow spread fuses adjacent ridges into a single soft band.
radius	number	96	Corner radius of each plate in pixels. Drives how curved the visible ridge edges read — high values produce big, lazy arcs; low values produce taut chevrons.
angle	number	135	Cascade direction in degrees. `0` = plates march right, `90` = down, `135` = down-right (the default — matches the canonical neumorphism light-from-top-left convention).
softness	number	36	Box-shadow blur in pixels. Higher values dissolve the ridges into a hazy gradient; lower values sharpen them into crisp lines.
depth	number	1	Shadow offset multiplier. Scales how far the highlight and shadow are pushed from each plate — read as how pronounced each ridge looks.
glow	number	0.8	Rim glow intensity (0–2). Drives the brightness of the orbital light blob clipped to each plate. `0` removes the moving glow entirely and leaves a pure neumorphic surface.
speed	number	0.5	Orbital animation speed multiplier — drives the rim-light orbit and the per-plate idle pulse. `0` freezes everything. Reduced-motion users see the static composition regardless.
sharpCorners	("top-left" \| "top-right" \| "bottom-right" \| "bottom-left")[]	[]	Corners whose border-radius is dropped to 0 — useful for cutting a sharp edge on one side of the cascade. Pass any subset (e.g. `["top-left"]` to square a single corner, `["top-left", "top-right"]` for a flat top).
className	string	—	Extra class names merged onto the outermost wrapper. Width and height are governed here — the plates fill the container.

Installation

Choose CLI for the one-line shadcn install, or copy the file manually.

npx shadcn@latest add https://2lazyui.com/r/neumorphism.json

Usage

Import the component and drop it into a render.

demo.tsx28 lines

import { Neumorphism } from "@/components/lazy-ui/neumorphism";

export function Demo() {
  return (
    <Neumorphism
      palette="pearl"
      layers={5}
      spread={93}
      radius={42}
      angle={205}
      softness={67}
      depth={2.9}
      glow={1.55}
      speed={0.7}
      sharpCorners={["top-right"]}
      className="min-h-[520px] rounded-2xl"
    >
      <main className="relative z-10 flex h-full items-center justify-center px-6">
        <h1
          className="text-5xl tracking-tight"
          style={{ fontFamily: "'Instrument Serif', serif" }}
        >
          Build <span className="italic">softly.</span>
        </h1>
      </main>
    </Neumorphism>
  );
}