CSS 阴影

CSS Shadow · 设计工具

可视化调整 box-shadow 阴影参数，支持多图层叠加效果，轻松创建精致的卡片阴影与悬浮特效，前端利器

总访问 0 次总使用 0 次

什么是CSS 阴影

可视化调整 box-shadow 阴影参数，支持多图层叠加效果，轻松创建精致的卡片阴影与悬浮特效，前端利器

CSS 阴影 是前端开发者和 UI 设计师打造精致界面阴影效果的专用工具。CSS 阴影（box-shadow）是现代网页设计中创造层次感、深度感和视觉焦点的重要技术。恰到好处的阴影可以让平面元素"浮"起来，引导用户注意力，提升整体设计的质感。本工具提供可视化参数调节，支持多图层阴影叠加，让您轻松创建从柔和自然到强烈戏剧化的各种阴影效果，并实时预览和复制 CSS 代码。

功能特色

多图层阴影叠加

支持添加多个阴影图层，每个图层独立设置偏移、模糊、扩展、颜色和透明度。通过叠加多个阴影（如一个近距离柔和阴影+一个远距离淡阴影），可以创建更加自然、富有层次感的立体效果，模拟真实光照环境。

精细参数控制

每个阴影图层可精确调节：X 偏移（-50px 到 50px，控制水平方向阴影位置）、Y 偏移（-50px 到 50px，控制垂直方向）、模糊半径（0-100px，边缘柔和程度）、扩展半径（-30px 到 30px，阴影大小缩放）。滑块+数字输入双重控制，精确到像素。

内阴影与霓虹效果

支持内阴影（inset）模式，阴影出现在元素内部，适合创建凹陷按钮、输入框、卡片内嵌效果。通过设置大模糊半径和鲜艳颜色，还可以创建霓虹光晕效果，为元素添加发光边框，适合科技感、未来感设计。

如何使用CSS 阴影

设置盒子样式与选择预设

在预览区上方，可以调整盒子的背景色和圆角大小，以更好地预览阴影效果。工具提供 6 种预设效果：柔和阴影、标准阴影、硬阴影、多层阴影、内阴影、霓虹效果。点击预设可快速应用一组精心调校的参数，作为设计的起点。

编辑阴影图层

点击"添加图层"创建多个阴影。在图层列表中选择要编辑的图层，调整四个核心参数：X/Y 偏移决定阴影方向（正值向右/向下，负值向左/向上）；模糊半径控制边缘柔和度（0 为硬边缘，数值越大越柔和）；扩展半径缩放阴影大小（正值放大，负值缩小）。勾选"内阴影"切换模式。

调整颜色与复制代码

为每个图层设置阴影颜色（建议使用黑色或深灰色）和透明度（0-100%，通常 5%-20% 最自然）。实时预览效果，满意后复制 CSS 代码。代码格式为 box-shadow: x y blur spread color, x y blur spread color;，多图层用逗号分隔。

CSS 阴影设计原理与最佳实践

box-shadow 语法详解

标准语法：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）：卡片默认状态，轻微阴影 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种预设效果