Free Neumorphism Generator

What is Neumorphism?

Neumorphism (or Soft UI) is a popular UI design trend that combines flat design and skeuomorphism. Instead of an element looking like it's floating above the background (like material design), a neumorphic element appears to extrude from the background itself.

• How the Math Works: Neumorphism relies heavily on CSS box-shadow. It uses two shadows: a dark shadow on the bottom-right and a light shadow on the top-left. The exact tint of the shadows is algorithmically calculated from your base color.
• Background Matching: For the Soft UI effect to work properly, the background color of your parent container must exactly match the background color of the element itself.
• Different Shapes: You can create Flat cards, Pressed buttons (using inset shadows), or gradients that make the element look curved (Concave & Convex).
• Performance: Generated entirely in pure CSS. No heavy images or JavaScript required to render the final result on your website.