EspañolNeumorphism (soft UI) CSS generator
Choose the background color: the element uses the same color and the shadows are calculated from it. Try the four shapes.
How to useButtons and cards that pop out of the background
Available in: 
Neumorphism (soft UI) CSS generator: what it is for
Neumorphism, or soft UI, makes buttons and cards look molded from the background itself, with a light shadow on one side and a dark one on the other.
Choose the color and the generator calculates both shadows from it, with size, corners, distance, blur, intensity and light direction. There are four shapes: flat, concave and convex (with a subtle gradient) and pressed (inner shadows). The page explains the care needed with contrast, this style's weak point.
How to use
- Choose the background color.
- Adjust distance, blur, intensity and light.
- Choose the shape and copy the CSS.
When to use it
- Buttons and cards in dashboards.
- Player or app controls.
- Decorative details on landing pages.
Frequently asked questions
How does neumorphism work?
The element has the same color as the background and two shadows: a lighter one on the side the light comes from and a darker one on the opposite side. This gives the impression of relief, as if the element were molded from the background itself.
Is neumorphism accessible?
With care. Since the element is the same color as the background, its edge has little contrast and can disappear for people with low vision. Use it for decorative details and cards, ensure contrast in text and icons, and don't rely only on relief to show that something is a button.
Does it work on a dark background?
It does, but the effect is subtler. With very dark or very light colors the shadow on the extreme side barely shows; mid tones give the most visible result.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.