CSS 阴影生成器 (含实时预览)
六种常见阴影预设 (柔和、卡片、抬升、发光、新拟态、内阴影)。用滑块微调所有参数, 实时预览结果, 复制即用 CSS。
工作原理
阴影的五个参数
X 偏移: 水平位移。正值使阴影向右移动, 负值向左。对于来自左上方的光照 (典型 UI 假设), 小的正 X 模拟左上光源。
Y 偏移: 垂直位移。正值使阴影向下移动, 模拟上方光源。几乎所有 UI 阴影都用正 Y。
模糊半径: 阴影边缘的柔和程度。0 = 锐边 (罕见)。8-30px 对卡片和按钮典型。更高值产生梦幻、柔和的阴影。
扩散: 均匀放大或缩小阴影。正值使阴影比元素更大; 负值缩小。负扩散结合偏移产生「抬升」效果。
颜色/不透明度: 阴影通常是低不透明度 (10-30%) 的黑色。彩色阴影流行但难用好。匹配你的背景明度范围 — 在深色 UI 上太黑的阴影消失, 在亮色 UI 上太亮的阴影对比不足。
内阴影
内阴影绘制在元素内侧而非外侧。用途: 按下按钮状态、凹陷输入框、新拟态「3D 下沉」效果。
内阴影遵守元素的圆角并忽略溢出。对在不改实际布局的情况下给扁平 UI 元素加视觉深度有用。
新拟态与「软 UI」趋势
新拟态 (2020-2022 流行) 用两个相反的阴影 — 一个亮、一个暗 — 让元素从同色背景上像挤出。我们的「新拟态」预设显示单个深色阴影; 完整新拟态结合相反侧的浅色内阴影: 'inset -8px -8px 20px rgba(255,255,255,0.5), 8px 8px 20px rgba(0,0,0,0.12)'。
注意: 纯粹的新拟态有无障碍问题 — 缺乏对比使元素难以区分。现代设计审慎使用, 常与传统阴影结合。
常见问题
›可以加多个阴影?
CSS 支持逗号分隔的多阴影: 'box-shadow: 0 4px 8px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06)'。我们的工具一次生成一个; 手动结合多个。
›怎么做新拟态效果?
右下深色阴影与左上浅色阴影结合, 都内阴影或都外阴影。例: '8px 8px 20px rgba(0,0,0,0.12), -8px -8px 20px rgba(255,255,255,0.7)'。预设显示深色一半; 手动加浅色阴影。
›模糊和扩散区别?
模糊柔化阴影边缘 (透明度渐变)。扩散改变阴影整体尺寸 (大于或小于元素)。blur=20 spread=0 是元素尺寸的柔和发光; blur=0 spread=20 是大于 20px 的硬阴影。
›为什么我的阴影看起来平?
可能不透明度太低、无偏移、或阴影色太接近背景。试 Y=8、blur=24、opacity=0.18 作起点 — 这些值在多数亮色背景上可见。
›可以用于 text-shadow?
几乎可以 — text-shadow 用相同语法但减去「扩散」和「inset」。复制后手动调整: 取 'X Y blur color' (去扩散和 inset)。
›阴影性能如何?
box-shadow 在现代浏览器 GPU 加速。许多元素上的许多阴影仍可能减慢滚动。卡片和按钮上的单阴影: 无忧。
›应该用阴影还是边框?
都有用。边框更锐利更无障碍。阴影看起来更柔和/更抬升。现代偏扁平的 UI 常都用: 细边框求锐利 + 柔和阴影求抬升。
›数据会上传吗?
不会。所有预览和 CSS 生成在本地; 不向服务器发送。
相关工具
最后更新: