Neumorphism generator
Create soft UI / neumorphic design elements with live preview.
Tip: Neumorphism works best with subtle colors close to the background. Avoid pure white or pure black. For dark mode, use low-saturation dark colors. The pressed state uses inset box-shadow.
.neumorphic {
border-radius: 30px;
background: #e0e5ec;
box-shadow: 12px 12px 24px #b0bdcf, -12px -12px 24px #ffffff;
}Neumorphism is one colour and two shadows: the surface is the same colour as the page behind it, and the illusion of depth comes entirely from a lighter shadow on the top-left and a darker one on the bottom-right. Pick a base colour here and both shadow colours are derived for you — the page converts your hex to HSL and shifts the lightness up and down by the intensity value, which keeps the hue and saturation intact so the shadows read as light and shade rather than as grey smudges. Four shapes cover the states you actually need: flat raised, concave, convex and pressed, which switches both shadows to inset. The preview renders the current values on a box, button, card, input, toggle or circle.
Key facts about Neumorphism generator
| Shadow colours are derived, not picked | Your base hex is converted to HSL and the lightness moved up and down by the intensity value, so hue and saturation carry through to both shadows |
|---|---|
| Controls | Size 100-360 px on the box and circle, corner radius 0-150 px, distance 2-40 px, intensity 1-40, blur 4-80 px, plus the base colour |
| Shadow geometry | Two shadows at equal and opposite offsets — distance px on both axes for the dark one, minus the same for the light one, with a shared blur |
| Four shapes | Flat is a solid surface; concave and convex replace the fill with a 145 degree linear gradient between the two derived colours in opposite directions; pressed adds inset to both shadows |
| Preview elements | 6 — box, button, card, input, toggle and circle. The input and toggle use their own reduced inset shadows, as those components need in real use |
| Presets | 8 — four light, from the classic #e0e5ec through a warm beige and a blue tint, and four dark from #2d2d3f to charcoal |
| Derived swatches | The light, base and dark hex values are shown as copyable swatches, so the same palette can be reused elsewhere in your stylesheet |
| Output formats | CSS (a .neumorphic rule), SCSS (four variables plus the rule) and Tailwind (a div with arbitrary-value classes) |
| Tailwind caveat | The shadow is emitted as shadow-[...] with spaces replaced by underscores, which is the syntax Tailwind requires for a multi-part arbitrary value |
| History | The last 20 settings are kept and restorable, so switching presets never loses what you had |
| No download | Output is copy-only — there is no file to save, since the result is a single CSS rule |
| The accessibility catch | The style has no borders and no colour contrast between a control and its background by design, which is why it fails contrast requirements on its own — see the FAQ |
What happens to your file
Nothing is uploaded here because nothing is uploaded here at all: the page takes a hex value and five numbers and produces a CSS rule. The colour maths — hex to HSL, lightness shift, HSL back to hex — is a dozen lines of JavaScript already loaded with the page, and the preview is real DOM elements with inline styles, not an image rendered somewhere else. There is no account, no saved project and no analytics on the values you pick. Nothing is written to local storage, so a reload returns to the default #e0e5ec, and the copy button is the only thing that moves data anywhere, onto your own clipboard.
About this tool
- 1
Choose the base colour first
This is the single most important decision: the surface, the page behind it and both shadows all come from it. Muted mid-tones work; pure white and pure black do not, because there is no room to move lightness in one direction.
- 2
Set distance and blur
Distance is how far the two shadows are offset, blur is how soft they are. A common starting point is a blur roughly twice the distance — 12 px and 24 px — which reads as a surface a few millimetres above the page.
- 3
Tune intensity
Intensity is the lightness gap between the two derived shadows. Low values give a barely-there surface, high values make the element look embossed. Watch the three swatches as you drag to see how far the colours are actually moving.
- 4
Pick the shape
Flat is the default raised panel. Convex bulges toward you, concave dishes away, and pressed flips both shadows inset, which is what a toggled-on button or a focused input should look like.
- 5
Preview the real component
Switch from the plain box to the button, input, toggle or card. Each one uses proportionally smaller inset shadows, which is how the style is actually applied — a full-strength shadow on a 32 px toggle looks wrong.
- 6
Copy the rule and set the parent
Take the CSS, SCSS or Tailwind output, then make sure the container behind the element uses the same base colour. Without that, the effect does not exist.
| CSS used | box-shadow with two comma-separated shadows, optionally inset; background is a solid colour or a linear-gradient for the curved shapes |
|---|---|
| Browser support | Universal — multiple box-shadows and inset have worked in every browser since IE9; no prefix, no fallback needed |
| Requires a matching parent | The element background must equal the page background, or the effect collapses into a coloured rectangle with odd shadows |
| Contrast | The effect carries no contrast of its own; WCAG 1.4.11 asks for 3:1 on control boundaries, which shadows at these lightness deltas do not reach |
| Tailwind version | 3 or later for arbitrary values; underscores in the shadow value are converted to spaces at build time |
| Dark mode | A toggle that switches the preview surroundings and loads dark presets — dark neumorphism needs a higher intensity to stay visible |
| Performance | A static box-shadow is inexpensive; animating blur or spread on hover is not, so transition transform or opacity instead |
| Network | None after page load |
- Use the same colour for the element and its parent. This is the whole trick — if the background behind the card is even slightly different, the illusion collapses and you just have a rectangle with two odd shadows.
- Avoid pure white and pure black bases. At lightness 100 there is nowhere for the light shadow to go, and at 0 the dark one has nowhere either, so one side of the effect disappears entirely.
- Copy the derived light and dark swatches into your stylesheet as variables. They are a small consistent palette, and reusing them keeps every neumorphic surface on the page in the same light.
- Pair pressed with an interaction state, not with a static element. Raised for resting, pressed for active or selected, is the one place the style communicates something real.
- Give buttons and toggles an additional visible cue — a colour change, an icon, a label change. Depth alone is not an affordance that everybody can see.
- Scale the shadow with the element. Distance 12 on a 240 px panel is subtle; the same value on a 32 px toggle is a blur that swallows the control, which is why the preview shrinks it automatically.
- Dark neumorphism needs a higher intensity than light. Shadows lose contrast fast at low lightness, which is why the dark presets here sit at 15 to 20 rather than 10 to 14.
- Do not animate blur or spread on hover. Shifting the offsets slightly, or moving the element with transform, produces the same impression and stays on the compositor.
- Shadow colours derived from one base colour
- Flat, concave, convex and pressed shapes
- Six live preview elements
- Eight light and dark presets
- Copyable light, base and dark swatches
- CSS, SCSS and Tailwind output
- Three preview widths and a dark-mode toggle
- 20-step history
- Build a soft-UI button set with matching resting and pressed states.
- Work out the shadow values for an inset input field that matches an existing raised card.
- Derive a consistent light and dark shadow pair from a brand background colour.
- Prototype a dark-mode variant of a soft UI without recalculating every shadow by hand.
- Produce Tailwind arbitrary-value classes for a design that already uses Tailwind.
- Show a client what the style actually looks like on a card and a toggle before committing to it.
Related tools
View allWorks well with this5
More in CSS & Design12
Updated