ZumaTools

Neumorphism CSS generator

Pick a base color, tune the sliders and shape, and copy the generated soft-UI CSS.

The preview background matches the base color — neumorphism only works on a surface of the same color.

Generated CSS
border-radius: 40px;
background: #e0e0e0;
box-shadow: 18px 18px 36px #bebebe,
            -18px -18px 36px #ffffff;

Accessibility note: neumorphism is a low-contrast style — edges are implied by faint shadows, so it often fails WCAG non-text contrast requirements. Use it decoratively, and give interactive elements clear labels, focus states and sufficient text contrast.

How it works

  1. Choose a base color — the preview background matches it, because neumorphic elements only work when they share the page color.
  2. Adjust size, corner radius, distance, intensity and blur with the sliders, and pick a shape: flat, concave, convex or pressed. The preview updates live.
  3. Copy the generated CSS — border-radius, background and the two-tone box-shadow — and paste it onto your element.

Frequently asked questions

How does the neumorphism effect actually work?
It simulates an element extruded from the page surface using two opposing shadows: a dark one cast toward the bottom-right and a light one toward the top-left, as if lit from above-left. Because both shadows are derived from the base color rather than black and white, the element appears to be made of the same material as the page.
Why must the element have the same background as the page?
The illusion depends on the element looking like a raised or recessed part of the surface itself, not a card sitting on top of it. If the element’s background differs from the page background, the soft shadows read as an ordinary drop shadow and the effect collapses. That is why this tool sets the preview background to your base color automatically.
What is the difference between flat, concave, convex and pressed?
Flat uses a solid background with outer shadows. Concave and convex keep the outer shadows but add a subtle diagonal gradient — dark-to-light for a dished surface, light-to-dark for a bulging one. Pressed moves both shadows inside the element with the inset keyword, making it look pushed into the page, which suits active button states.
Is neumorphism accessible enough for real interfaces?
Only with care. The style is inherently low-contrast: element edges are defined by faint shadows, not borders, so users with low vision may not perceive buttons as interactive, and WCAG’s 3:1 non-text contrast requirement is hard to meet. Use it for decorative surfaces, add clear text contrast and focus states, and avoid it for critical controls.
Does this tool upload anything or need an account?
No. The preview is rendered by your own browser’s CSS engine and the shadow colors are computed locally from your base color — nothing is sent to a server. The output is plain CSS using box-shadow and linear-gradient, supported without prefixes in every modern browser.

About this tool

Neumorphism, or soft UI, styles elements as if they were molded from the page surface itself — softly raised buttons, dished wells and pressed states, all in a single material. Getting it right by hand is fiddly because the effect depends on two box-shadow layers whose colors must be mathematically derived from the base color: one shifted darker for the shadow side, one shifted lighter for the highlight side. This generator does that derivation for you and shows the result on a preview whose background always matches the base color, since the illusion only holds when element and page share a surface.

Everything runs client-side. As you move the sliders, the tool lightens and darkens each RGB channel of your base color by the chosen intensity to produce the two shadow tones, then assembles a standard CSS declaration: border-radius, a background (solid for flat and pressed, a 145-degree gradient for concave and convex), and a two-part box-shadow with your distance and blur values. The light source is fixed at the top-left, the convention nearly all soft-UI designs follow. Nothing is uploaded and no account is needed; the CSS you copy is exactly what the preview renders.

Typical uses include music-player and smart-home dashboard mockups, calculator keypads, toggle switches and any interface aiming for a calm, tactile feel. The pressed shape is handy as an :active state paired with a flat or convex default, giving buttons a physical push without JavaScript.

Two practical tips: keep the base color in the light-to-mid range — near-white and near-black backgrounds leave no room for the highlight or shadow tone — and treat neumorphism as decoration, not structure. Its low-contrast edges make interactive elements hard to identify for many users, so back it up with clear labels, visible focus rings and sufficient text contrast.

Related tools