Neumorphism Generator

How to use it

1. Pick a Base color. The card and the surface around it share this colour; that shared colour is what makes the effect work.
2. Move Size and Corner radius to shape the card.
3. Set Distance for how far the shadows reach and Intensity for how far the two shadow colours sit from the base colour.
4. Choose a Shape: raised draws both shadows outside, pressed draws them inside, flat draws none.
5. Copy the CSS. The comment line records the two derived shadow colours so you can reuse them elsewhere.

Common use cases

• Raised controls — buttons, toggles and cards that look pressed into the same surface they sit on.
• Pressed states — switch a button from raised to pressed on :active by flipping to the inset variant.
• Finding a workable base colour — mid-tone greys with a slight blue cast hold the two shadows better than pure white or black.
• Prototyping a soft UI direction — settle distance and intensity here, then move the numbers into design tokens.
• Checking contrast — the preview text flips between dark and light so you can see when a base colour stops being readable.

Why it stays private

Colour maths and preview rendering run in your browser. No palette, screenshot or snippet is uploaded.

FAQ

Q: Why does the effect disappear on a white or black background? A: Both shadows are derived from the base colour by darkening and lightening it. Near white or near black there is no room to move in one direction, so one shadow vanishes.

Q: How do I make a pressed state for a button? A: Generate the raised variant for the resting state and the pressed variant for :active, keeping every other value identical so only the shadow direction changes.

Q: Is this accessible? A: Neumorphic controls often have low contrast against their surface, and shadows alone do not convey state to assistive technology. Keep visible labels, focus rings and a contrast ratio that passes your target level.