Soft UI
/* Generated on cssgen.org */
Master the "Soft UI" trend. We handle the complex color math to generate perfect extruded or pressed elements based on a single background color.
/* Generated on cssgen.org */Neumorphism works differently than traditional UI design. In standard design, a card might be white while the page background is gray. In Neumorphism, the card and the background must be the exact same color. The illusion of a physical, plastic-like object is created entirely by chaining two opposing CSS box-shadows.
A top-left shadow is cast using a color slightly lighter than the base color, simulating a light source. A bottom-right shadow is cast using a color slightly darker than the base. Our generator automatically calculates these hexadecimal shifts using JavaScript, ensuring a flawless blend.
#ffffff) or pure black (#000000). You cannot cast a shadow lighter than pure white, so the effect will look broken. Always use an off-white or dark-gray mid-tone.:active (clicked) state "Pressed". Our generator allows you to toggle and copy both states.Neumorphism (a portmanteau of New and Skeuomorphism) is a design trend that makes elements appear extruded from the background like molded plastic. It achieves this by matching the element's background color exactly to the page background, and using opposing light and dark box-shadows to define the edges.
If your base background color is set to pure white (#ffffff), it is physically impossible for the browser to render a shadow that is lighter than the background. For Neumorphism to work, your base color must be slightly tinted or gray (e.g., #e0e5ec).
While possible, it is incredibly difficult to pull off visually. Soft UI relies on opaque surfaces, while Glassmorphism relies on translucent ones. If you want to explore the translucent frosted-glass effect instead, check out our Glassmorphism Generator.