无需登录 数据私有 本地保存

新拟态凹陷效果生成器 - 内阴影CSS

16
0
0
0
凹陷效果调节
Neumorphism
🎨 快速预设
背景设置
#E8ECF1
🔻 暗色内阴影（左上）
#C4CAD4
🔺 亮色内阴影（右下）
#FFFFFF
📐 通用设置
根据背景色自动计算阴影颜色
点击元素切换图标 · 凹陷效果实时预览
凸起效果
外阴影
凹陷效果
内阴影 (当前)
生成的 CSS 代码
box-shadow: inset -8px -8px 15px 0px #c4cad4, inset 8px 8px 15px 0px #ffffff;
常见问题与知识点
新拟态（Neumorphism，也称Neo-skeuomorphism）是一种UI设计风格，通过柔和的内外阴影在单色背景上创造出类似浮雕的视觉效果。凹陷效果（Pressed/Inset Effect）使用box-shadow: inset在元素内部同时施加暗色和亮色阴影，模拟出"被按压下去"的立体感。这种风格在2020年左右由设计师Alexander Plyuto推广，成为Dribbble等平台上的热门趋势。其核心特点包括：低对比度、柔和阴影、与背景色融合、触感隐喻。
核心CSS属性是box-shadow配合inset关键字。典型的凹陷效果需要两个内阴影：一个暗色阴影在元素内部左上方向（负偏移），模拟光线被遮挡；一个亮色阴影在元素内部右下方向（正偏移），模拟光线反射。例如：
box-shadow: inset -6px -6px 12px rgba(0,0,0,0.1), inset 6px 6px 12px rgba(255,255,255,0.8);
元素背景色需要与页面背景色保持一致，这样才能实现"从同一平面凹陷"的视觉效果。
凹陷效果最适合表示激活/选中状态：被点击的按钮、选中的选项卡、切换开关的激活端、输入框焦点状态、卡片按压反馈等。它也常用于展示"已按下"的交互状态。但需注意，新拟态风格在无障碍访问性方面存在挑战——低对比度可能使视障用户难以辨识交互元素。建议在非关键路径或辅助性交互中使用，并配合其他视觉线索（如图标、文字颜色变化）来增强可辨识性。
凹陷效果使用inset内阴影，而凸起效果使用外阴影（不加inset）。两者的阴影方向逻辑相反：
• 凸起（Raised）：暗色外阴影在右下，亮色外阴影在左上，元素"浮出"背景
• 凹陷（Pressed）：暗色内阴影在左上，亮色内阴影在右下，元素"陷入"背景
只需在box-shadow属性中添加/移除inset关键字并调整偏移方向即可切换。本工具专注于生成凹陷（内阴影）效果的CSS代码。
调整凹陷深度的关键参数：
• 偏移量：增大偏移（如从±6px到±12px）会让阴影更偏离边缘，增强深度感
• 模糊半径：适中的模糊（10-20px）产生柔和过渡；过小显得生硬，过大则失去立体感
• 颜色对比度：暗色与亮色阴影之间的亮度差异越大，凹陷感越强
• 扩展半径：负扩展收缩阴影范围，正扩展扩大阴影范围，微调可改变边缘锐度
建议使用本工具的滑块实时调整，观察不同参数组合的效果。
新拟态在暗色模式下同样出色，甚至在某些场景更具优势。暗色背景（如#2d2d2d）上，亮色阴影使用较亮的灰色调，暗色阴影使用接近黑色的深色调。由于暗色模式下整体亮度较低，阴影的微妙变化更易被感知。但同样需要注意对比度问题——确保阴影与背景之间有足够的亮度差异。点击本工具的"暗色模式"预设可快速体验暗色新拟态效果。
box-shadow的inset关键字享有极佳的浏览器兼容性，所有现代浏览器（Chrome、Firefox、Safari、Edge）以及IE9+均完全支持。多个阴影（用逗号分隔）同样被广泛支持。在移动端浏览器中表现一致。这使得新拟态成为一种可靠的生产就绪方案。无需担心兼容性问题，但建议为关键交互提供额外的视觉反馈作为渐进增强。
本工具的自动配色功能将背景色转换为HSL颜色空间，然后：
• 暗色阴影：保持色相和饱和度，亮度（Lightness）降低18-22%
• 亮色阴影：保持色相和饱和度，亮度提高15-20%
算法会根据背景色亮度自适应调整——极亮背景下暗色阴影降幅更大，极暗背景下亮色阴影增幅更大。您也可以关闭自动配色，手动精确控制每个阴影的颜色，实现更个性化的效果。
🔧 相关工具