Neumorphism CSS Generator

A neumorphism CSS generator turns a surface color into a soft UI shadow: one highlight, one shade, a radius, and a light direction. Pick a card, button, input, toggle, circle, or panel, then copy the CSS that matches the preview.

The highlight and shade are calculated from the color you choose. They are not a fixed gray pair, so a blue-gray surface and a warm surface do not share the same shadow hex values.

Neumorphism, often called soft UI, is a look where controls appear molded from the background. The element and the surface share a color. A light shadow sits toward the lamp and a dark shadow sits on the opposite side. That pair is what makes the edge look soft instead of outlined.

It showed up in interface experiments around 2020. It is useful for a small set of controls on a plain background. It is a poor fit for dense pages, tiny type, or anything that must stay obvious in bright sunlight.

It is a visual editor for that shadow pair. You change color, size, radius, distance, blur, intensity, and where the light sits. The page writes the CSS, including inset shadows for a pressed or concave shape and a gradient for concave and convex surfaces.

Use it when you want neumorphic button CSS, a neumorphic card, or an inset field without hand-tuning two hex colors every time the palette changes.

1. Choose a component. Start from Card, Button, Input, Toggle, Circle, or Panel.
2. Set the surface. Pick a surface color. The light and dark shadows are calculated from that color.
3. Tune depth and light. Adjust distance, blur, intensity, radius, and light direction. Switch between raised, pressed, flat, concave, and convex.
4. Copy the CSS. Copy CSS, the box-shadow value, Tailwind, variables, HTML, or React. Download the CSS or share the URL.

The readable part of the effect is box-shadow with two layers. For a light at the top left, a raised card looks like this shape: a positive offset in a darker color, and a negative offset in a lighter color. Pressed UI CSS puts inset on both layers so the shade falls inside the edge.

border-radius sells the softness. A square with the same shadows looks like a tile. A fully rounded control becomes a circle or a pill. The element background has to match the stage behind it, or the extrusion breaks and you just have a drop shadow. Need a different corner system later? The border radius generator edits that property on its own.

The surface color is converted to OKLab. Intensity moves lightness up for the light shadow and down for the dark shadow. Lightness is kept inside a band so a white surface does not produce #ffffff and a black surface does not produce #000000. Optional custom colors replace those results when you set them under Advanced.

• Surface color is the element and the stage.
• Light shadow is the lit edge.
• Dark shadow is the far edge.
• Distance is the offset length. Angle turns that length into X and Y. 0° is light from the top. 315° is the usual top-left lamp.
• Blur spreads each shadow. Spread, in Advanced, grows it before the blur.
• Raised and convex use outer shadows. Pressed and concave use inset. Flat keeps the same pair at a short distance.

Designers use a soft UI generator to try a card or a panel before committing the palette. Frontend developers use a CSS neumorphism generator when a mock asks for a neumorphic button or an inset search field and they need the shadow value, not a screenshot.

A neumorphism shadow generator is the same job as a neumorphism box shadow generator: two shadows that stay attached to one surface. An input wants the pressed form. A toggle wants a pressed track and a raised knob, which is why that preset writes both rules. A circle is the same raised math with equal width and height.

A normal drop shadow lifts an object off a different background. Neumorphism needs the backgrounds to match, and it needs the second shadow as a highlight. If you only want layered drop shadows, offsets, and spread on their own, use the CSS box shadow generator.

Soft UI is opaque and monochrome. Glassmorphism is a translucent panel over a busy background, usually with backdrop-filter. They solve different problems. Compare the frosted look in the glassmorphism generator. A gradient behind that panel is a separate step: the CSS gradient generator builds the background, and blur lives on the CSS filter generator.

Raised is the default card and button. The dark shadow falls away from the light and the light shadow sits on the near edge. Pressed reverses the depth with inset. Concave uses that inset shadow plus a gradient that darkens toward the light. Convex uses the outer shadow plus a gradient that lightens toward the light. Flat is the same highlight and shade pulled in close, for a control that should not look tall.

Buttons should not stop at the raised shadow. The button preset adds :active with the pressed shadow so a click has a state. Pair it with real button CSS from the CSS button generator when you also need hover color, padding, and type.

• Using a different color behind the element. The soft edge disappears.
• Hard-coding #ffffff and a gray shadow after the surface color changes.
• Setting distance and blur so low that the control has no edge.
• Setting them so high that the shape looks muddy.
• Putting the effect on small text.
• Skipping focus and active styles, so the control only looks clickable to people who can see the shadow.
• Stacking several neumorphic layers until nothing has a clear level.

Check the contrast note in the tool. Body text on the surface should reach 4.5:1. The preview picks a dark or light label for that reason. Shadows are not a focus style. Button, input, and toggle CSS include :focus-visible with a solid outline.

If the warning stays on after you darken the text, the surface itself is too close to both black and white to carry a soft UI and readable type. Change the surface, or confirm the pair with the color contrast checker.

• Need more control over multi-layer shadows? Use the CSS box shadow generator.
• Need corners that do not follow one radius? Use the border radius generator.
• Need hover, padding, and label styles around the soft shadow? Use the CSS button generator.
• Need a gradient behind the layout? Use the CSS gradient generator.
• Need blur or a filter instead of a shadow? Use the CSS filter generator.
• Need to check the label against the surface? Use the color contrast checker.