Loona Neumorphism Generator — Soft UI Shadows in CSS
Neumorphism’s whole secret is that card and background share one colour, lit from two sides. Pick the surface; the tool derives both shadow tones so they always belong together.
How to use the Neumorphism Generator
- Pick the surface colour — keep it light grey or a pale tint; pure white and dark colours cannot neumorph.
- Tune distance (how far the light sits) and blur (how soft the material feels).
- Copy the CSS and set the SAME colour as your page background — that match is the effect.
How it works
The dark shadow is the surface colour darkened by a fixed step, the light shadow lightened by the same step, placed diagonally opposite — simulating one light source. Because both derive from the surface, the illusion survives any hue.
Worked example
A music app’s player controls go soft-UI: play button and volume card appear moulded from the same grey surface.
Frequently Asked Questions
Why must card and page colours match?
The effect is a shadow illusion on a continuous material. Different colours break the spell instantly.
Is neumorphism accessible?
Its contrast is inherently low — use it for decorative containers and large controls, never for body text or critical actions.
Can I make a "pressed-in" version?
Swap the two shadows’ signs in the copied CSS (or use inset shadows) for the carved-in look.
What colours work best?
Light greys and pale tints (#e0e5ec family). Saturated colours lose the softness.
More Colour & CSS Generators
The visual Color Palette Generator and the basic Gradient Generator live in Loona Image Tools; this family is the CSS-developer-grade set (multi-stop gradients, exact code output).