Neumorphism, also called soft UI, makes elements look pressed out of or into the page using two shadows: a light one on the side facing the light and a dark one on the other. Pick a base colour and adjust size, radius, distance, intensity, blur, shape and light direction. The preview shows the style on a card, a button, a toggle and a text input, a contrast panel tells you honestly where the look becomes hard to see, and you can copy the result as plain CSS or Tailwind classes.
Neumorphism sits between flat design and the old skeuomorphic look. Instead of borders or strong drop shadows it uses one light and one dark shadow on an element that is exactly the same colour as the page, so the element seems moulded from the background. It suits calm, tactile interfaces: music and smart-home controls, dashboards with a few large tiles, calculators and portfolio pieces.
It suits busy pages and forms less well. Everything shares one colour, so hierarchy has to come from size, spacing and type rather than colour, and clickable things do not stand out on their own. A practical approach is to use soft surfaces for containers and keep buttons, links and inputs clearly marked with colour, text or a border.
WCAG 2.1 success criterion 1.4.11 asks that the visual boundary of a user interface component, such as a button or a text field, has at least 3:1 contrast with what is next to it. In neumorphism the boundary is a shadow a few percent darker than the background, which usually lands well under 1.5:1. People with low vision, people using a phone in sunlight and people on a dim screen may not see the control at all.
This tool measures the dark shadow against the base and warns you when it is below 3:1. Raising intensity helps, but before the shadow reaches 3:1 the soft look is usually gone, so the better fix is to add a second cue. In the preview the input carries a visible border and the toggle shows its state with colour and a moving knob, not just a pressed shadow. Text contrast is checked separately against the 4.5:1 body-text level.
The CSS output is a single class with border-radius, background and box-shadow, plus a body rule that sets the page to the same colour. Rename the selector to suit your project. For a hover state, reduce the distance and blur a little; for an active or pressed state, switch to the pressed shape, which uses the same colours with the inset keyword.
For a whole design system, store the two shadow colours as custom properties, for example --neu-light and --neu-dark, and build each component's box-shadow from them. Then a change of base colour only touches two variables. If your site has several background colours, generate a separate pair for each, because the shadows only look right on the colour they were made for.
Yes. It is free with no signup and no limit. Everything runs in your browser and nothing you set is sent to We.Inc.
The tool makes a lighter and a darker version of your base colour by scaling each red, green and blue value up and down by the intensity, for example 15%. The dark shadow is offset away from the light by the distance you choose, the light shadow by the same amount towards it, and both use your blur. Concave and convex add a gentle gradient of the base colour, and pressed puts both shadows inside the element.
Often not, and that is its best-known weakness. The style depends on shadows that are only slightly different from the background, so the edges of buttons and fields usually fall below the 3:1 contrast WCAG asks for user interface components, and pressed versus unpressed states can be hard to tell apart. You can still use it well: keep text at 4.5:1 or more, add a border, icon or label to anything clickable, show a clear focus outline and never rely on the shadow alone to show a state. The contrast panel checks the first two for you.
The element and the page behind it must be the same colour. If the element sits on white or on a different colour, the light shadow vanishes and only a grey smudge remains. Set the parent background to the base colour shown in the code.
The Tailwind tab uses arbitrary values, such as shadow-[...] and bg-[#E0E5EC], so it works in Tailwind version 3 and 4 without changing your config. Spaces inside the values are written as underscores, which is how Tailwind expects them.
Yes, with a higher intensity. Dark bases leave little room for a darker shadow, so the light shadow does most of the work. The Dark slate, Midnight and Charcoal presets are tuned for that.
Related: CSS shadow generator, Color palette generator, Color contrast checker, CSS border generator.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.