Skip to main content

Neumorphism Generator — soft-UI dual-shadow CSS + Tailwind + SwiftUI

Neumorphism CSS generator — soft-UI inset/outset shadow pair, live light-source direction, 12 presets, copy CSS/Tailwind/SwiftUI.

  • Runs locally
  • Category Generator
  • Best for Starting from a blank page without committing to the first result.
Soft button
WCAG contrast · 12.97:1
Passes WCAG AAA (7:1) — exceptional for neumorphism.
.neumorphism {
  width: 160px;
  height: 160px;
  background: #e0e5ec;
  border-radius: 48px;
  box-shadow: 8px 8px 24px rgba(40, 41, 42, 0.45),
              -8px -8px 24px rgba(246, 247, 249, 0.5);
}

Soft-UI button generator that does the math for you: pick a background and a light direction, copy CSS / Tailwind / SwiftUI / styled-components. WCAG contrast warning surfaces the style's built-in accessibility problem so you don't ship a button that fails the audit.

What this tool does

Neumorphism — the "soft UI" look popularised by the 2020 Dribbble wave and rebuilt for iOS/macOS surfaces — depends on one trick: the element and its background share the same colour, and two mirrored shadows (one light highlight, one dark depression) carve depth out of the surface. Get the math wrong and you get a "flat rectangle with weird grey fuzz" instead of the soft-pressed-button look. This generator does the math: you pick a background colour and a light-source direction (8 compass points or freeform on the SVG sun), and it computes both shadow offsets, both alpha values, and the four target snippets — raw CSS, Tailwind arbitrary values, SwiftUI doubled `.shadow()` modifiers, and a styled-components template literal — that all describe the exact same shape. Twelve presets cover the canonical surfaces: classic light, classic dark, the four pastel tints (sky blue, baby pink, lavender purple, mint green) that ship in every neumorphism Figma kit, macOS-style and iOS-style tuned for real device backgrounds, Material elevation- feel, plus "extra soft", "high contrast", and a brand-aurora variant for marketing surfaces. Toggle between convex (outset pair) and concave (inset pair) to show the surface pushing out or pressing in. The hard truth about neumorphism — its built-in accessibility problem — is surfaced as a live WCAG contrast warning whenever the demo text drops below 4.5:1 against the background, so you do not ship a "looks like Dribbble, fails the audit" button.

Tool details

Input
Files + Numbers
The page exposes text boxes, numeric controls, file pickers, or structured inputs depending on the tool.
Output
Live result + Copy + Preview
The result area focuses on usable output, with copy, download, or preview actions when supported.
Privacy
Browser-side processing
The main tool logic does not call an external API, so inputs normally stay in the current tab.
Save / share
Shareable URL state
Key settings are encoded in the URL so another person can reopen the same setup.
Performance budget
Initial JS <= 30 KB
No WASM budget is declared, keeping the tool quick to open on mobile.
Best fit
Generator · Designer
Category and role tags drive related tools, internal links, and quick fit checks.

How to use

  1. 1. Input

    Paste or drop your content into the tool panel.

  2. 2. Process

    Click the button. All processing is local in your browser.

  3. 3. Copy / Download

    Copy the result or download to disk in one click.

How Neumorphism Generator fits into your work

Use it to get a strong first draft, starter asset, or structured output that you can edit before publishing.

Generation jobs

  • Starting from a blank page without committing to the first result.
  • Creating repeatable drafts, names, templates, or placeholder assets.
  • Exploring options before choosing the one that fits the job.

Generation checks

  • Review generated output before it reaches a customer, page, or document.
  • Change defaults when you need a specific brand voice, format, or audience.
  • Keep only the parts that match the real task.

Good next steps

These links move the current task into a more complete workflow.

  1. 1 CSS Grid Visual Generator CSS grid visual generator — drag to set columns/rows, place grid-area named regions, copy ready CSS + HTML, with 12 layout templates. Open
  2. 2 CSS Button Generator Design buttons that look pressable — 3D raised, neumorphic, glass — with a live preview you can hover & press, plus full :hover/:active CSS export Open
  3. 3 CSS Shadow Generator Pro CSS shadow generator pro — multi-layer box-shadow + text-shadow + filter:drop-shadow, with Material/Tailwind/Apple shadow presets and dark-mode preview. Open

Real-world use cases

  • Build a Dribbble-fidelity soft button without manually computing shadow pairs

    You've been handed a neumorphism mockup that looks great in Figma and breaks the first time someone tries to translate it to CSS. Drop the background colour, pick the "Classic light" preset, point the light source at the top-left, switch the export tab to CSS. The two shadows are already paired and balanced; the value is one copy away from your component file. No more "the highlight is too bright" / "the lower shadow is missing" Slack threads in the design-dev handoff.

  • Convert a macOS-style settings card to the web

    You're rebuilding a desktop app's settings screen as a web dashboard. macOS sidebar cards have a very specific neumorphic-but-not-Dribbble look — subtle, low contrast, slightly cool. Pick the "macOS-style" preset, switch the shape mode to convex, copy the CSS. You'll get the same gently-elevated card with shadow values tuned for the actual tones macOS uses, not a generic "Material 3" approximation that always looks slightly off.

  • Ship a "pressed" input style for a form

    You want your text inputs to read as "depressed into the surface" — the canonical neumorphism input look. Pick a preset, click concave, copy the CSS. The inset shadow pair carves the input into the card. Pair it with the convex submit button next to it for the classic raised-button / pressed-input contrast that makes the form feel tactile.

  • Audit a neumorphism component library for contrast violations

    A vendor library shipped a "Soft UI" theme. Before adopting it, paste each colour pair into the generator and read the WCAG ratio off the live warning. You'll often discover the theme passes for icons and decorative cards but fails on body text — useful evidence to take to the procurement conversation: "we can use it for cards but every text input and button label needs an alternate theme."

  • Prototype a SwiftUI control with the same look as a web demo

    You're porting a web design to iOS and want the same soft surfaces. Pick the iOS-style preset, switch the export tab to SwiftUI, paste into your view. You'll get two `.shadow()` modifiers stacked on the rounded rectangle — visually equal to the web preview, no guessing at how `0.7` alpha CSS translates to SwiftUI `Color.white.opacity(...)`.

  • A/B test high-contrast vs soft variants of the same CTA

    You want to measure whether the soft neumorphic CTA actually converts vs a high-contrast variant. Generate both with the same colour family — soft via the "extra soft" preset, high-contrast by bumping the intensity slider and choosing a darker shape colour — copy each as CSS, drop into Optimize / your A/B harness. Now you have data instead of "designers fight engineers about which one is better."

Common pitfalls

  • Shipping neumorphism without checking WCAG contrast. The style's structural accessibility problem: surface, text, and background hover within a few percent of the same lightness, dragging contrast toward 1:1. Read the live WCAG warning before you ship; if it's red, darken text, switch to icon-only with 3:1 strokes, or limit the style to decorative surfaces.

  • Forgetting that the shape colour must equal the background colour. With a different fill, the two shadows stop reading as "carved from the surface" and start reading as "two unrelated drop shadows on a tinted panel". The slider clamps shape colour to ±5% of the background — stay inside the window.

  • Setting a light-source direction for one shadow and forgetting to mirror it for the other. A correct pair has the light shadow on the side facing the light and the dark shadow opposite. The generator emits both with matched offsets — the failure mode here is copying only one of the two output lines.

  • Cranking distance and blur past realistic limits chasing a "more 3D" look. Past distance 30 + blur 40 the effect stops looking soft and starts looking like a floating panel with a weird grey aura. The presets cover the realistic range; if you outgrow them, neumorphism is the wrong style for the job.

  • Using `inset` (concave) for primary CTAs. Concave reads as "this has been pressed" — perfect for an active state, wrong for the resting state. Default to convex for buttons / cards; reserve concave for inputs and pressed-state variants.

  • Pasting the Tailwind output into a Tailwind 2.x project without JIT. The `shadow-[...]` arbitrary-value syntax requires JIT (default since 3.0). Upgrade Tailwind, or move the value into `tailwind.config.js → theme.extend.boxShadow` as a named utility.

Privacy

Everything runs inside this browser tab. The 12-slot configuration (colours, sizes, light angle, mode, preset, export tab) rides in the URL only so a share link reproduces the exact button — no colour code, no light angle, no preset choice ever leaves your machine. There are no image uploads, no analytics calls carrying your design, no fonts or images fetched from a CDN: the SVG sun, the preview shapes, and the demo text are all rendered with inline DOM and CSS. The page works fully offline once loaded.

FAQ

Tool combos

Folks in your role tend to reach for these alongside this tool.

Browse all tools for this role
Made by Toolora · 100% client-side · Updated 2026-06-13