Better

Neumorphism

i

Welcome to Better NEUMORPHISM!

This app was created to improve upon other neumorphism generators by implementing 2 unique tactics:

  • HSL implementation
  • Accommodation of rounded edges in UI elements

Using HSL colors allows us to interact uniquely with the luminance of the UI and provides a much more cohesive feeling to the elements. Try luminance values between 50% and 90% for best results.

Adding the ability to control rounded edges, or ramp, gives designers more flexibility into the finer details of UI elements. The effect can be subtle...or extreme.

I hope you like my take on neumorphism generators and find this tool useful.

hsl( 

 )

box-shadow:

8px 8px 20px hsl(184, 8%, 57.6%),
-8px -7px 20px hsl(184, 8%, 86.39999999999999%)),

undefined,

inset -0.2px -0.2px 0.8px hsl(184, 8%, 57.6%),
inset 0.2px 0.2px 0.8px hsl(184, 8%, 86.39999999999999%)),

undefined;

Click to Copy