Neumorphism — also called "soft UI" — is one of the most-searched CSS design trends, alongside the glassmorphism and claymorphism card styles, because it produces a clean, tactile look where elements appear gently extruded from, or pressed into, the background. This snippet is a complete neumorphic card: an extruded container, an inset icon well, and buttons that press in on click (compare the 3D push button). It is pure CSS, and once you understand the two-shadow formula you can apply it to any element.

The core formula: two opposite shadows

Every neumorphic element uses two box-shadows at once — a dark shadow offset toward the bottom-right and a light highlight offset toward the top-left, both the same blur. The card uses box-shadow: 9px 9px 18px #b8bcc4, -9px -9px 18px #ffffff. The dark shadow (#b8bcc4) implies light coming from the top-left, so the bottom-right edge is in shadow; the white highlight (#ffffff) brightens the top-left edge. Together they make the element look like it was extruded from the surface — a single piece of the same material gently raised. This dual-shadow trick is the entire foundation of neumorphism.

Why the background color is everything

Neumorphism only works on a mid-tone background, never pure white or black. The body uses #e0e5ec, a light gray, and — critically — the card, icon, and buttons all share that exact same background. The shadows are simply a darker and a lighter tint of #e0e5ec. If the element were a different color than its surroundings, the illusion of it being "pushed out of" the surface would break. This is why every neumorphic element must match its parent's background: the effect is the surface deforming, not a separate object sitting on top. Pick your background first, then derive the dark shadow (~12% darker) and light highlight (white or ~8% lighter) from it.

Inset shadows: the pressed-in well

To make something look pressed *into* the surface instead of raised out of it, you flip the shadows to inset. The icon container uses box-shadow: inset 5px 5px 10px #b8bcc4, inset -5px -5px 10px #ffffff. The inset keyword draws the shadow inside the element, so the dark shadow now sits on the top-left interior and the highlight on the bottom-right — the exact inverse of the raised card. The result is a smooth circular "well" that the icon sits inside. Raised (outer shadow) and pressed (inset shadow) are the only two neumorphic states, and combining them in one component — a raised card containing an inset well — is what gives soft UI its depth.

Buttons that physically press

The buttons are raised by default with box-shadow: 5px 5px 10px #b8bcc4, -5px -5px 10px #ffffff. On :active, the shadow swaps to the inset version (inset 4px 4px 8px …), so the button visibly sinks into the surface when pressed, then pops back when released. A transition: box-shadow 0.18s smooths the change. This raised-to-inset toggle is the most satisfying neumorphic interaction and the clearest way to show the technique: the same element, the same color, only the shadow direction changes between out and in.

Strengths and the contrast caveat

Neumorphism looks elegant and modern, and it is trivially themeable — change one background color and re-derive the two shadow tints. Its well-known weakness is contrast: because elements share their background color and rely on subtle shadows, edges can be hard to see, which is an accessibility concern for low-vision users and fails WCAG contrast for boundaries. Use neumorphism for decorative containers and secondary controls, and make sure text and icons inside have strong contrast against the surface (here the indigo icons and dark gray text are clearly legible on the light gray). For primary actions where visibility is critical, consider pairing neumorphism with a clearly colored accent or a visible focus ring so the control is unmistakable.

Tuning the depth

The shadow offset and blur control how "deep" the effect looks. The card's 9px 9px 18px reads as a firmly raised panel; smaller offsets like 5px 5px 10px (used on the buttons) feel subtler and closer to the surface. Keep the blur roughly double the offset for a soft, realistic falloff. For a more dramatic, chunky look, increase both; for a barely-there soft UI, decrease them. Always change the dark and light shadows together and keep their offsets mirrored (e.g. 9px 9px and -9px -9px) so the implied light direction stays consistent across every element.

Customizing the card

To re-theme, change the shared background (e.g. to a soft blue #dde3ec or a warm #ece5dd), then update both shadow colors to a darker and lighter version of it — that single change re-skins the card, icon well, and buttons at once. Swap the icon SVG and the heading/description text for your content. Round the corners more or less with border-radius. Add a second inset well for an avatar or a progress ring. Because every piece follows the same two-shadow rule, the card stays visually consistent no matter how you extend it.

Build with AI

Build, Understand, Optimize, and Extend It With AI

Rather than eyeballing the shadow pairs, paste this snippet's HTML and CSS into an AI coding assistant like Claude and ask it to explain precisely why the card, the icon well, and the buttons all have to share the exact same background hex value for the extruded illusion to hold, and what breaks visually the moment one of them uses even a slightly different shade. The same assistant can help optimize it, for instance checking whether the dark-shadow-to-light-shadow ratio in this specific palette would still look correct if you shifted the background to a cooler or warmer gray, or whether the box-shadow transition on button press could be made snappier without looking abrupt. It's also useful for extending the card: ask it to derive the two shadow colors programmatically from one CSS custom property using color-mix or a preprocessor function instead of hardcoding three hex values, build a dark-mode neumorphic variant, or add a neumorphic toggle switch that uses the same raised-to-inset technique. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text

Build a "neumorphic" (soft UI) card in plain HTML and CSS only, using the dual-shadow technique — no images, no SVG filters, minimal JavaScript.

Requirements:
- The card, an inner icon container, and any buttons must all share the exact same background color as the page behind them (a single mid-tone gray, never white or black), since the effect depends on every element matching its surrounding surface.
- The card's raised/extruded look must come from exactly two box-shadow layers on the same element: one dark shadow offset toward the bottom-right and one light (near-white) shadow offset by the same distance toward the top-left, both using the same blur radius, so the two shadows imply a single consistent light source from the top-left.
- The icon container must look pressed into the surface (a "well") using the same two-shadow technique but with the inset keyword added to both shadows, which flips which corner appears dark versus light compared to the raised card.
- Buttons must be raised by default (using the same dual outer-shadow technique at a smaller offset/blur than the card) and must visually flip to the inset/pressed version of those same shadows on the CSS :active state, with a short transition so the shadow change looks like a physical press rather than a snap.
- Add a code comment explaining that the dark shadow color and light shadow color must both be derived from the shared background color (roughly a darker and lighter tint of it) rather than arbitrary colors, and that changing the theme means re-deriving both tints from a new background.
- Ensure text and icon content inside the card has strong, readable contrast against the shared background despite the subtle shadow-based edges, since low contrast is neumorphism's most common accessibility pitfall.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Step by step

How to Use

1
Match the backgroundSet the card, icon, and buttons to the SAME background as the page (here #e0e5ec). Neumorphism only works when elements share the surface color.
2
Use the dual-shadow formulaApply a dark shadow bottom-right and a light highlight top-left of equal blur for a raised look (box-shadow: 9px 9px 18px dark, -9px -9px 18px light).
3
Add inset wellsFor pressed-in elements (icon container, active buttons), add the inset keyword so the shadows draw inside.
4
Re-theme from one colorPick a new mid-tone background, then derive the dark shadow (~12% darker) and light highlight (white) from it and update both everywhere.
5
Tune the depthIncrease the shadow offset/blur for a deeper raise; keep blur about double the offset and mirror the offsets.
6
Export in your formatClick "HTML" for a standalone file, "JSX" for a React component, or "Tailwind" for a React + Tailwind version.

Real-world uses

Common Use Cases

Soft UI dashboards & widgets

Membership cards, settings panels, and music/player widgets where a clean, tactile neumorphic look is the brand aesthetic.

Toggle and control surfaces

Pressable soft-UI buttons and switches that sink into the surface give satisfying feedback for media and smart-home style UIs.

Learn the dual-shadow technique

Understand why two opposite box-shadows plus a shared background create the extruded illusion, and how inset flips it to pressed.

Pricing and membership cards

A neumorphic plan card stands out from flat designs and signals a premium, modern product feel.

Reusable soft-UI primitives

Build raised and inset utility classes once and apply them to cards, inputs, and buttons across a soft-UI design system.

Contrast-aware decoration

Use neumorphism for containers while keeping text and icons high-contrast, so the design stays legible despite the subtle edges.

Got questions?

Frequently Asked Questions

Neumorphism (soft UI) makes elements look extruded from or pressed into the background using two box-shadows at once — a dark shadow offset one way and a light highlight offset the opposite way, both tints of a shared mid-tone background. The result is a soft, tactile, single-material look.

The effect is the surface itself deforming, not an object placed on top. If the element were a different color, it would look like a separate sticker rather than a raised part of the same surface. So the card, icon, and buttons all share the page background, and only the shadows differ.

Add the inset keyword to both shadows. inset draws the shadow inside the element, inverting the light direction so it reads as a well pressed into the surface. The icon container and active buttons use this.

Pick a new mid-tone background, then derive a darker shadow (about 12% darker) and a lighter highlight (white or slightly lighter) from it, and update both shadow colors everywhere. Changing those three values re-skins the whole component.

It can have contrast issues because elements share their background and rely on subtle shadows, which can make edges hard to see. Use it for decorative containers and keep text/icons high-contrast; add a visible focus ring to important controls so they remain clearly perceivable.

Yes. Click "JSX" for a React component or "Tailwind" for a React + Tailwind version. The effect is pure CSS box-shadow, so it works identically in React — just keep the shared background color on the card and its children.

Loading…