Skip to content
T
Tools.Town
Free Online Tools for Everyone
soft UI

Neumorphism Generator

100% Free

Generate soft-UI (neumorphism) CSS — two opposite light and dark shadows on a surface that matches the background — with a live preview, four shapes, and copy-paste code, all in your browser.

Live Preview
Copy CSS
Instant
100% Client-Side

1. Customise

Shape

2. Live preview

The container uses your base colour so the soft-UI effect reads correctly.

3. Copy CSS

.neumorphic {
  border-radius: 50px;
  background: #e0e0e0;
  box-shadow: 20px 20px 40px #bababa, -20px -20px 40px #ffffff;
}
Dark shadow
#bababa
Light shadow
#ffffff

Tip: neumorphism needs the element and its background to share the same colour. Everything runs in your browser.

Embed This Tool

Easy to Embed

Add Neumorphism Generator to your website or blog in seconds.

  • Responsive design
  • Lightweight & fast
  • No backend required
  • Always up-to-date 
<iframe
  src="https://tools.town/embed/neumorphism-generator/"
  width="100%"
  height="600"
  style="border:none; border-radius:12px;"
  loading="lazy"
  title="Neumorphism Generator">
</iframe>

Share This Tool

Share Instantly

Share Neumorphism Generator with anyone — no login required.

  • Shareable link
  • No login required
  • Works on any device
  • No account needed

Share via

Advertisement

How to Use

  1. 1 Pick the base colour of your surface and background
  2. 2 Adjust size, border radius, distance, blur, and intensity
  3. 3 Choose a shape: flat, concave, convex, or pressed
  4. 4 Watch the live preview update as you tweak
  5. 5 Copy the generated CSS
  6. 6 Paste it onto your element — and use the same colour behind it

Features

  • Two opposite shadows (dark + light) for the soft-UI effect
  • Four shapes: flat, concave, convex, and pressed (inset)
  • Auto-derived dark and light shadow colours from your base
  • Live preview rendered on a matching background
  • Copy-paste CSS with a ready-made class wrapper
  • Everything runs in your browser — nothing is uploaded

Why it Matters

Neumorphism (soft UI) creates a subtle extruded-from-the-background look using two opposite box-shadows — but getting the light and dark colours, offsets, and blur to balance by hand is fiddly, and the effect breaks unless the element and its background share the same colour. A generator with a live preview lets you dial in a believable soft-UI surface in seconds and copy correct CSS.

★★★★★

Use Cases

UI Designers

Prototype soft-UI buttons, cards, and toggles fast

Front-End Devs

Grab correct neumorphic box-shadow CSS to paste

Learning CSS

See how light and dark shadows create depth

Design Systems

Standardise a soft-UI surface style

What this tool does

The Neumorphism Generator builds the CSS for the soft-UI look: two opposite box-shadows — one darker, one lighter — on a surface that matches the background, producing a subtle extruded effect. Adjust the colour, size, radius, distance, blur, intensity, and shape, then copy the generated CSS.

How it works

From your base colour the tool derives a darker shadow and a lighter highlight, then composes a box-shadow with the offset and blur you choose. Concave and convex shapes add a matching gradient; the pressed shape uses inset shadows. The live preview renders on a background of the same colour so the effect reads correctly.

A note on accessibility

Neumorphism is inherently low-contrast, so use it for accents rather than critical controls, keep clear focus states, and verify text and control contrast with a contrast checker before shipping.

Privacy

Everything runs locally in your browser. Nothing you enter is uploaded, logged, or stored.

Frequently Asked Questions

What is neumorphism?
Neumorphism (or 'soft UI') is a design style where elements look gently extruded from or pressed into the background. It's created with two box-shadows of the same offset — one darker, one lighter — placed on opposite sides of the element, on a surface that shares the background colour. The result is a subtle, tactile, low-contrast 3D effect.
Why must the element match the background colour?
The illusion depends on the element appearing to be the same material as the surface behind it, raised or pressed. If the element's background differs from the page background, the soft shadows read as a normal drop shadow instead of an extrusion. That's why the preview here renders on a matching background and the CSS sets the element's colour too.
What do the four shapes mean?
Flat keeps the surface a solid colour with outer shadows (raised look). Concave and convex add a subtle gradient so the surface appears to curve inward or outward. Pressed uses inset shadows so the element looks pushed into the background — ideal for active or selected states.
Does neumorphism have accessibility issues?
It can. Because the style is inherently low-contrast, neumorphic buttons and inputs can be hard to distinguish and may fail colour-contrast guidelines. Use it for accents rather than critical controls, and always pair it with clear focus states and sufficient text contrast. Test important UI with a contrast checker.
Is my data stored anywhere?
No. The generator runs entirely in your browser. Your colour and settings are never uploaded, logged, or stored — refreshing the page resets everything.
📖

Want to understand the math?

Browse all guides →
Neumorphism in CSS
neumorphism

Neumorphism in CSS: How Soft UI Shadows Work

Understand how neumorphism creates depth with two opposite shadows, why the background colour matters, the four shape styles, and how to use soft UI accessibly.

24 Jun 2026

5 min read

Related Tools You Might Like

Border Radius Generator

Visually craft CSS border-radius with per-corner sliders, live preview, unit toggle (px/em/rem/%), and shorthand collapsing.

Box Shadow Generator

Visually craft CSS box-shadow — offset, blur, spread, color, opacity, inset toggle, plus Material-style elevation presets.

Glassmorphism Generator

Design frosted-glass UI cards with live backdrop-blur, transparency, saturation, border and shadow controls — copy ready-to-use CSS or Tailwind.

CSS Gradient Generator

Build linear and radial CSS gradients with up to 6 color stops, custom angle/position/shape, live preview, and ready-made presets.

Aspect Ratio Calculator

Find the aspect ratio of any size and resize images while keeping the same proportions.

Browse more free tools
More Design Tools All categories