CSS阴影生成器

功能说明

CSS阴影生成器是一款在线可视化编辑工具，支持box-shadow（元素阴影）、text-shadow（文字阴影）、drop-shadow（图标投影）三种类型。

功能特点：可视化调整X/Y偏移、模糊半径、扩散半径、内阴影、颜色透明度调节、内置Material Design标准阴影预设、一键复制CSS代码。

适用于网页卡片、按钮、输入框、文字特效、透明PNG/SVG图标投影等场景。所有操作在本地完成，生成的CSS代码可直接复制到项目中。

使用步骤

1. 选择阴影类型（box-shadow/text-shadow/drop-shadow）。

2. 调节X/Y偏移、模糊、颜色等参数。

3. 点击"内阴影"可切换为inset阴影效果。

4. 使用预设快速应用Material Design标准阴影或Neumorphism效果。

常见问题

三种阴影类型的区别？

box-shadow适用于矩形元素（卡片、按钮）；text-shadow仅作用于文字；drop-shadow跟随实际像素轮廓，适合透明PNG/SVG图标。

Material Design阴影有什么特点？

Material阴影由多层叠加组成，比单层阴影更真实。本工具内置1dp/4dp/8dp等标准值，可直接复制使用。

你可能还想问

box-shadow 的参数怎么理解？

依次是水平偏移、垂直偏移、模糊半径、扩散半径与颜色；模糊越大边缘越柔，扩散为正则阴影外扩。生成后拖拽即可直观调节。

内阴影（inset）用在哪？

适合表现凹陷的输入框、按压态按钮或内嵌面板；与普通阴影叠加使用能做出立体凹槽效果，注意内阴影颜色宜比背景稍深而不是纯黑。

阴影怎么调才自然？

用低透明度（10-20%）+较大模糊+小偏移，模仿真实光线投射；多层阴影（一大一小叠加）比单层更接近物理效果，也便于做悬浮层次。

相关工具

相关内容