Free Neumorphism CSS Generator
Free Neumorphism CSS Generator
Generate soft UI neumorphism effects with a live preview and instant CSS export. Neumorphism (also called soft UI) creates a tactile, extruded look using dual box shadows on a flat background — one light shadow and one dark shadow. Adjust color, size, radius, intensity, blur, and shape (flat, concave, convex, pressed). Copy the CSS and paste it directly into your project. No account, no watermarks.
Frequently Asked Questions
What is neumorphism?
Neumorphism (soft UI) is a design style that uses two box shadows — one light and one dark — on a background of the same color as the element, creating the illusion of an extruded or inset shape. It simulates physical depth without gradients or borders.
What CSS properties are used for neumorphism?
Neumorphism relies entirely on box-shadow with two values: a light shadow (offset to the top-left, white or a lightened version of the background) and a dark shadow (offset to the bottom-right, darkened version of the background). Border-radius controls the shape softness.
What background color works best for neumorphism?
Neumorphism works best on mid-tone backgrounds — typically light greys like #e0e5ec or #f0f3f7. Pure white or black eliminate the shadow contrast effect. The element and background must share the same base color.
What is the difference between flat, concave, convex, and pressed?
Flat is the default extruded look. Concave adds an inward gradient, making the surface appear dished. Convex adds an outward gradient, like a dome. Pressed reverses the shadow direction to simulate a button being pushed in.
Can I use neumorphism in dark mode?
Yes. Use a dark base color (e.g. #2d2d3a) and adjust shadow colors accordingly — a slightly lighter shadow for the highlight and a very dark shadow for the depth. This generator supports any base color so you can dial in dark mode values.