Neumorphism

Elements look extruded from the background — one light shadow, one dark shadow

All platformsMotion & BackgroundsContent areaEffect

Live preview (drag the parameters, watch it change)

Shadow distance 6px Shadow blur 12px Intensity 0.16 Radius 16px

Code

<div class="neu-card">…</div>

<style>
.neu-card {
  background: #E4E2DB; /* 必须与页面背景同色 */
  border-radius: 16px;
  box-shadow: 6px 6px 12px rgba(90,88,80,0.16),
              -6px -6px 12px rgba(255,255,255,0.9);
}
.neu-pressed { /* 按下态：换内阴影 */
  box-shadow: inset 6px 6px 12px rgba(90,88,80,0.16),
              inset -6px -6px 12px rgba(255,255,255,0.9);
}
</style>

<div class="rounded-[16px] bg-[#E4E2DB] shadow-[6px_6px_12px_rgba(90,88,80,0.16),-6px_-6px_12px_rgba(255,255,255,0.9)]">…</div>

export function NeuCard({ children }) {
  return <div style={{
    background: "#E4E2DB", borderRadius: 16,
    boxShadow: "6px 6px 12px rgba(90,88,80,0.16), -6px -6px 12px rgba(255,255,255,0.9)",
  }}>{children}</div>;
}

Code snippets are MIT-licensed — copy and adapt freely.

How this effect works

它是怎么工作的（中文）

新拟态不画边框：同一块背景色上，同时投一道向左上的白色高光影和一道向右下的深色影，眼睛就读出了「凸起」。按下去时把外影换成内影（inset），就像真的被压进材料里。代价是对比度天然偏低——文字和关键状态不能只靠它区分，无障碍上要另加手段。

How it works (English)

Neumorphism draws no borders: on the same background color, a white highlight shadow up-left plus a darker shadow down-right makes the eye read volume. Pressed states swap outer shadows for inset ones, as if pushed into the material. The cost is inherently low contrast — never let text or critical states rely on it alone; add another accessibility cue.

参考与来源 Sources

本条为「批次 1（重建）」成果（2026-11-10 用户决定：原妞妞老师素材不导出，改由公开材料重建）：效果概念参考开源效果生态——Magic UI（MIT）、Uiverse（MIT）、Animista、Paper Shaders（Apache-2.0）、tsParticles（MIT）、CSS Loaders（MIT）等（见 /resources 对应条目，许可以各项目为准）；本站的实现代码、参数体系与全部文案均为 Aglaia 原创，未复制上述项目的代码或文案，也与妞妞老师原始素材无关。

Matching prompt

Neumorphism PromptStale · →