Developer Tools New Tool

Free Online CSS Neumorphism Generator for Soft UI Shadows

Pick one base colour and the tool works out the light and dark shadow from it, which is the whole trick behind soft UI. Set the distance, the blur, the intensity and which corner the light comes from, switch between raised and pressed, and read the measured contrast ratio before you commit.

Free Forever Nothing Uploaded Raised and pressed Contrast ratio measured

Free Online CSS Neumorphism Generator for Soft UI Shadows

Advertisement Slot (Top Banner) Google AdSense Unit • Responsive Banner

CSS Neumorphism Generator Everything happens in this tab. Nothing you paste is sent anywhere.

Preview

Soft card The card, the button and the surface are all the same colour. Only the shadows separate them.

CSS

Base Colour #e0e5ec Text Radius 18px

Shadow Distance 8px Blur 16px Intensity 15%

Light Source State Wrap the output in selectors

Buy Us A Coffee

Enjoying WizTools123? Help keep our server infrastructure 100% free and open for everyone.

Buy Us A Coffee

Sponsored Content (Below Tool) Google AdSense Placement

Making a neumorphic control usable

Keep the look, add something a person can actually see.

The style itself is not forbidden, but a control whose only boundary is a soft shadow fails WCAG 1.4.11 Non-text Contrast, which asks for at least 3 to 1 between a control's visual boundary and what is next to it. Three changes keep most of the look and fix most of the problem:

Give buttons a real border, or a background that differs from the surface, not only shadows.
Keep the text on top well above 4.5 to 1. Soft grey text on a soft grey card is where this style usually fails first.
Never rely on raised versus pressed alone to say what is selected. Add a tick, a label, a colour, or text.

Also worth remembering: a shadow is not visible to someone using a high contrast mode, and Windows high contrast throws box shadows away entirely. A neumorphic toggle in that mode becomes a rectangle with no state at all, which is the strongest argument for pairing it with something that is not a shadow.

How to Build Neumorphic Shadows in CSS

A few steps, and nothing is uploaded.

Choose the base colour Everything comes from this one value. The surface, the card and the button all use it, and the two shadow colours are lightened and darkened versions of it.

Set distance, blur and intensity Distance is how far the shadows sit from the shape, blur is how soft they are, and intensity is how far the two derived colours move away from the base.

Pick the light source and state The light corner decides which shadow is light and which is dark. Raised puts both shadows outside the shape; pressed puts the same pair inside it with inset.

Read the contrast, then copy The measured ratio between the dark shadow edge and the surface is shown under the preview, along with the text ratio. Copy the rule when both are acceptable.

What to Know About Neumorphism

Including the accessibility problem that is built into the style.

Neumorphism has a real accessibility problem, and it is not a small one. The whole style depends on the control being the same colour as its background, so the contrast between the two is inherently low, often below 1.5 to 1. WCAG 1.4.11 asks for 3 to 1 between a control boundary and its surroundings, and a soft shadow rarely reaches it. This page measures the ratio between the dark shadow edge and the surface and says plainly when it fails, but it cannot make the style pass; only adding a border, a fill or a label can.

The two shadow colours are computed from the base, not chosen. One is the base lightened, the other is the base darkened, both by the intensity you set. That is the entire trick: because they are the same hue as the surface, the shape looks moulded out of it rather than sitting on it. Pick the shadow colours by hand from a palette and the effect collapses into an ordinary drop shadow.

Pressed is the same rule with inset. There is no second set of values for the pressed state; both shadows move inside the shape and swap nothing else. That is why a raised and a pressed control can share one declaration list, and also why the difference between them can be very hard to see at low intensity.

This page cannot read an existing rule, and it styles only these two shapes. There is no input, no toggle, no slider track, no dark theme variant, and no way to load CSS back into the controls. It also makes no judgement about text you place inside the shape beyond the measured ratio, so check your real content on your real background.

Key Features & Capabilities

What this tool does, and what it deliberately does not.

Shadows from one colour Light and dark are derived from the base by lightening and darkening it.

Distance, blur, intensity The three values that decide how moulded the shape looks.

Four light sources The light corner flips which shadow goes where, in both states.

Contrast measured The edge ratio and the text ratio, with a plain pass or fail.

Card and button together Both shapes share the base colour, so the effect is shown honestly.

Runs in your browser Nothing is uploaded and nothing is fetched. Works offline.

About the CSS Neumorphism Generator

Neumorphism, or soft UI, is the look of a control pressed out of the surface behind it rather than placed on top of it. It is made with a single element and two shadows: one lighter than the background on the side facing the light, one darker on the opposite side. Both shadow colours have to come from the background colour itself, because the illusion depends on them being the same hue. That is the only rule, and it is the one most hand-written attempts get wrong.

This page does that arithmetic for you. Give it one base colour and it lightens and darkens that colour by the intensity you set, using the colour helpers in the shared engine rather than a table of fixed greys, so the effect works on a warm beige or a cool slate just as well as on the usual light grey. The distance and blur controls move the pair of shadows, the light source picks which corner they fall from, and the state switch adds inset to both to make the shape look pressed.

The contrast readout is the part that took the most thought, because it is the part that argues against the style. Soft UI works by making a control almost the same colour as its surroundings, which is exactly what accessibility guidance tells you not to do. Rather than hide that, the page measures the ratio between the darker shadow edge and the surface, and the ratio between your text and the base, and states when each one falls short. The style is still yours to use; you just get to use it knowing what it costs.

Frequently Asked Questions

Shadow colours, inset, contrast ratios and when not to use this.

Because the effect is meant to look like the surface itself being deformed. Light and dark versions of the same hue read as highlight and shade on one material. A grey shadow on a beige card reads as two separate objects, and a black shadow at low opacity turns the whole thing muddy. The tool derives both colours from your base for this reason, and the two swatches under the preview show you the exact values it used.

Usually, yes, on the non-text contrast requirement. WCAG 1.4.11 asks for at least 3 to 1 between the visual boundary of a control and the colour next to it, and a soft shadow on a same-coloured surface rarely reaches even 1.5 to 1. The readout on this page tells you the measured figure. If you need the style to pass, add a visible border or a differing fill and keep the shadows as decoration rather than as the only boundary.

How far the two derived shadow colours move away from the base. At 5 per cent the shape barely lifts off the surface; at 40 per cent the highlight is nearly white and the shade is nearly a mid grey, which looks strong but also starts to look like plastic. Most designs sit between 10 and 20 per cent, and the contrast readout tends to improve as you raise it.

Only by the inset keyword. The same two shadows, the same distance and the same blur are drawn inside the shape instead of outside it, which reads as a dent. Because the values are identical, a button can move between the two states by swapping one word, and that is what the output shows when you switch the state control.

No. The generator writes CSS from the controls and never parses it. If you already have a neumorphic rule, read the base colour and the offsets off it, set them here, and take the new output. The page is a writer, not an editor.