CSS Neumorphism Generator
Build soft-UI surfaces with two shadows derived from one base colour — raise a card out of the page, press it in, or make a button that sinks when clicked. Tune the light angle and copy clean CSS or Tailwind classes.
Presets
Surface
:active state. Convex and concave add a soft gradient across the surface.
Light & depth
Shape
Output
What Is Neumorphism?
A soft-UI style where elements look pressed out of — or into — the page itself.
Neumorphism (also called soft UI) works with a single trick: the element's background is the same colour as the page behind it, and two shadows do all the work. One shadow is the base colour mixed towards black and sits on the side away from the light; the other is the base colour mixed towards white and sits on the lit side. Together they read as a smooth bump or dent rather than a floating box.
That's why the page background matters so much. On a different background colour the effect breaks — the element becomes an ordinary card with a strange shadow, which is why this generator outputs a matching body background rule for you.
Three ingredients control the look: the light angle (where the light comes from, usually the top-left at around 145°), the distance and blur (how far the shadows reach and how soft they are), and the contrast (how far the two shadow colours sit from the base). Small contrast and a large blur give the calm, expensive look; high contrast and a short blur look chunkier.
Neumorphic surfaces have very little contrast by design. That's fine for decorative cards, but check your text and interactive states: keep labels dark on light surfaces, add a visible focus ring, and don't rely on the shadow alone to show that something is clickable or disabled.
How a Neumorphic Surface Is Built
Every declaration the generator writes, and what it does.
background: #e0e5ec
The base colour. It must match the page background — that shared colour is what makes the surface look part of the page.
5.2px 7.4px 18px rgba(…)
The dark shadow: the base mixed towards black, pushed away from the light source.
-5.2px -7.4px 18px rgba(…)
The light shadow: the base mixed towards white, on the opposite side. Both offsets come from the light angle.
Light angle
0° lights from the top, 90° from the right, 145° from the top-left — the classic soft-UI direction.
inset
Draws both shadows inside the box so the surface looks pressed in — inputs, tracks and the pressed state of a button.
Convex & concave
Replace the flat background with a subtle linear-gradient() along the light angle: convex domes up, concave caves in.
How to Use the CSS Neumorphism Generator
Get your result in under ten seconds.
Pick a base colour
Choose Light, Dark, Warm or Ocean — or set your own. The preview background always follows it, exactly as it must on your page.
Shape the light
Set the light angle, then distance, blur and contrast until the surface reads as raised or pressed. Try the Button style for a pressed :active state.
Copy the code
Switch to CSS or Tailwind and press Copy. The page-background rule is included so the effect survives on your site.
Why Use the CSS Neumorphism Generator on Developers Web Tools
Fast, accurate and private — built for developers.
Light-angle aware
One dial sets both shadow offsets and the gradient direction, so the light always looks consistent.
Colours from your base
Shadow colours are derived from the base colour — no more guessing grey values for dark themes.
Button state
The Button style writes the matching :active inset shadow so the press feels real.
Tailwind output
Get bg-[…], rounded-[…] and shadow-[…] classes, including the active: variant.
Smooth
Renders once per frame while you drag the sliders.
Private
Runs entirely in your browser — nothing is uploaded or stored online.
Frequently Asked Questions
Almost always because the page background isn't the same colour as the card. Copy the body { background: … } rule the generator gives you, or set the same colour on the card's parent.
A very light desaturated grey-blue such as #e0e5ec, or a dark slate such as #2b303b. Pure white and pure black don't work: on white there's no room for the light shadow, on black no room for the dark one.
Choose the Inset style — both shadows are drawn inside the box. For buttons, choose Button: the surface is raised normally and sinks on :active.
135–150° (light from the top-left) matches how people expect light to fall and lines up with most design systems. Keep one angle for the whole page.
That's the Contrast and Shadow opacity pair. Soft UI usually sits at 15–30% contrast and 50–70% opacity. Larger blur with the same opacity looks subtler.
Use it carefully. The style has very low contrast, so keep text dark on light surfaces, never use the shadow as the only sign that something is clickable, and always add a visible :focus-visible outline.
Yes — it's plain box-shadow and background, supported everywhere, with no prefixes needed.
Only in your own browser (local storage), so it's still there next time. Press Reset to clear it.