Better Neumorphism

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.

Drucial CodePen GitHub

Color:

hsl(

)

Depth

Strength

Edges

Direction

Output


								box-shadow:
								8px 8px 20px hsl(254, 23%, 61.6%),
		-8px -7px 20px hsl(254, 23%, 92.39999999999999%)),
								undefined,
								inset -0.2px -0.2px 0.8px hsl(254, 23%, 61.6%),
		inset 0.2px 0.2px 0.8px hsl(254, 23%, 92.39999999999999%)),
								undefined;