Neumorphism (soft UI) shadow generator. Visual builder + instant CSS copy.
🌥️ Preview
CSS code

How to use

  1. Pick a background color (Neumorphism stays on the same color).
  2. Choose the shape (flat / concave / convex / pressed).
  3. Tune size, radius, distance, blur, intensity.
  4. Preview live and copy the CSS.

Key features

  • 4 shapes (flat / concave / convex / pressed)
  • Auto-paired light + dark shadows
  • 4 shadow directions
  • Fine control over size, radius, intensity, blur
  • Instant CSS copy

Use cases

  • Fintech app UI — Toss / banking app card style
  • Audio / music controllers — knobs, sliders
  • Smart home apps — IoT device cards
  • Dashboard cards — gentle depth
  • Login screens — consistent inputs & buttons

What is Neumorphism?

Neumorphism (New + Skeuomorphism) hit Dribbble around 2020. It applies light + dark shadows on the same background to make elements appear extruded or pressed into the surface. Soft and minimal but has accessibility (low contrast) and differentiation downsides — best for decorative highlights rather than primary UI. Seen in iOS dark mode, fintech apps, music players.

FAQ

Why must all corners be rounded?

Sharp corners look unnatural with light/shadow simulation. radius 20px+ recommended.

Dark mode?

Yes, set a dark background (e.g. #2c3038). Shadow pair auto-adjusts.

Accessibility concerns?

Low contrast hurts visually impaired users. Use as decorative elements, not primary content.

Free?

Yes.