CSS 阴影
CSS Shadow · 设计工具
可视化调整 box-shadow 阴影参数,支持多图层叠加效果,轻松创建精致的卡片阴影与悬浮特效,前端利器
CSS阴影Shadow
总访问 0 次总使用 0 次
什么是CSS 阴影
可视化调整 box-shadow 阴影参数,支持多图层叠加效果,轻松创建精致的卡片阴影与悬浮特效,前端利器
CSS 阴影 是前端开发者和 UI 设计师打造精致界面阴影效果的专用工具。CSS 阴影(box-shadow)是现代网页设计中创造层次感、深度感和视觉焦点的重要技术。恰到好处的阴影可以让平面元素"浮"起来,引导用户注意力,提升整体设计的质感。本工具提供可视化参数调节,支持多图层阴影叠加,让您轻松创建从柔和自然到强烈戏剧化的各种阴影效果,并实时预览和复制 CSS 代码。
功能特色
多图层阴影叠加
支持添加多个阴影图层,每个图层独立设置偏移、模糊、扩展、颜色和透明度。通过叠加多个阴影(如一个近距离柔和阴影+一个远距离淡阴影),可以创建更加自然、富有层次感的立体效果,模拟真实光照环境。
精细参数控制
每个阴影图层可精确调节:X 偏移(-50px 到 50px,控制水平方向阴影位置)、Y 偏移(-50px 到 50px,控制垂直方向)、模糊半径(0-100px,边缘柔和程度)、扩展半径(-30px 到 30px,阴影大小缩放)。滑块+数字输入双重控制,精确到像素。
内阴影与霓虹效果
支持内阴影(inset)模式,阴影出现在元素内部,适合创建凹陷按钮、输入框、卡片内嵌效果。通过设置大模糊半径和鲜艳颜色,还可以创建霓虹光晕效果,为元素添加发光边框,适合科技感、未来感设计。
如何使用CSS 阴影
1
设置盒子样式与选择预设
在预览区上方,可以调整盒子的背景色和圆角大小,以更好地预览阴影效果。工具提供 6 种预设效果:柔和阴影、标准阴影、硬阴影、多层阴影、内阴影、霓虹效果。点击预设可快速应用一组精心调校的参数,作为设计的起点。
2
编辑阴影图层
点击"添加图层"创建多个阴影。在图层列表中选择要编辑的图层,调整四个核心参数:X/Y 偏移决定阴影方向(正值向右/向下,负值向左/向上);模糊半径控制边缘柔和度(0 为硬边缘,数值越大越柔和);扩展半径缩放阴影大小(正值放大,负值缩小)。勾选"内阴影"切换模式。
3
调整颜色与复制代码
为每个图层设置阴影颜色(建议使用黑色或深灰色)和透明度(0-100%,通常 5%-20% 最自然)。实时预览效果,满意后复制 CSS 代码。代码格式为
box-shadow: x y blur spread color, x y blur spread color;,多图层用逗号分隔。CSS 阴影设计原理与最佳实践
box-shadow 语法详解
标准语法:
inset(可选):内阴影标志,默认外阴影。
offset-x/offset-y:阴影相对于元素的偏移距离。正值向右/向下,负值向左/向上。设为 0 则阴影居中。
blur-radius:模糊半径,值越大阴影边缘越柔和。设为 0 得到硬边缘阴影。
spread-radius(可选):扩展半径,正值使阴影扩大,负值使阴影收缩。
color:阴影颜色,支持任何 CSS 颜色值。
box-shadow: inset offset-x offset-y blur-radius spread-radius color;inset(可选):内阴影标志,默认外阴影。
offset-x/offset-y:阴影相对于元素的偏移距离。正值向右/向下,负值向左/向上。设为 0 则阴影居中。
blur-radius:模糊半径,值越大阴影边缘越柔和。设为 0 得到硬边缘阴影。
spread-radius(可选):扩展半径,正值使阴影扩大,负值使阴影收缩。
color:阴影颜色,支持任何 CSS 颜色值。
设计系统中的阴影层级规范
在 Material Design 等设计系统中,阴影用于表达元素的高度(elevation):
无阴影(0dp):静态元素,如普通文本、图标。
低层级(1-2dp):卡片默认状态,轻微阴影
中层级(4-8dp):悬停状态、下拉菜单,明显阴影
高层级(12-24dp):模态框、对话框,强烈阴影
最佳实践:使用半透明黑色(rgba(0,0,0,0.x))而非纯灰色,这样阴影在不同背景色上表现更自然。避免阴影过大过黑,保持微妙和克制。
无阴影(0dp):静态元素,如普通文本、图标。
低层级(1-2dp):卡片默认状态,轻微阴影
0 1px 3px rgba(0,0,0,0.1)。中层级(4-8dp):悬停状态、下拉菜单,明显阴影
0 4px 12px rgba(0,0,0,0.15)。高层级(12-24dp):模态框、对话框,强烈阴影
0 12px 40px rgba(0,0,0,0.2)。最佳实践:使用半透明黑色(rgba(0,0,0,0.x))而非纯灰色,这样阴影在不同背景色上表现更自然。避免阴影过大过黑,保持微妙和克制。
核心特性
多图层叠加
无限图层自由组合
四参数精调
偏移/模糊/扩展/透明
内阴影+霓虹
凹陷与发光效果
6种预设效果
快速应用专业阴影