CSS 阴影生成器 使用方法
- 1
选择起始阴影
点击“柔和”“多层”或“层级 2”等预设，也可以直接调整默认图层。
- 2
调整每个图层
选中一个图层，设置它的 X 和 Y 偏移、模糊、扩展、颜色、不透明度和内阴影。
- 3
在你的底色上检查
修改盒子尺寸、圆角和颜色，使其与你要设置样式的元素一致。
- 4
复制 CSS
把 box-shadow 声明或 Tailwind 类名复制到你的代码中。
限制与 Pro
免费且无需注册：图层数量不限，偏移 −100 到 100 px，模糊最大 200 px，另有 12 个阴影预设。
Pro 可去除广告；阴影编辑器的功能在所有套餐中都是完整的。 了解 Pro
关于 CSS 阴影生成器
CSS 的 box-shadow 属性接受一个图层列表，每一层都有水平和垂直偏移、模糊半径、扩展距离、颜色，以及可选的 inset 关键字。想让两层或更多层叠加出自然的立体感，需要把这些参数配合好，直接在样式表里改数字很难做到。这个编辑器在实时预览的盒子上显示效果，你拖动滑块即可调整，并自动生成声明和 Tailwind 的 shadow-[…] 类名。
图层数量不限，可以临时隐藏某一层来对比，也可以上移或下移，列表中的第一层绘制在最上面，还可以切换为内阴影，用于按下状态的按钮和输入框。偏移范围为 −100 到 100 像素，模糊最大 200 像素，扩展为 −100 到 100，每种颜色都有独立的不透明度。负的扩展值是现代柔和阴影的关键：它把阴影收到元素下方，只在底部露出一层柔和的光。
预览盒子可以调整尺寸，并设置任意圆角、盒子颜色和背景颜色，方便你在真实的设计底色上判断效果，包括需要更高不透明度或彩色光晕的深色主题。
内置十二个起点：四个 Material Design 层级、一个柔和的单层阴影、一个五层的平滑阴影、一个硬朗的新粗野主义偏移、拟物浮雕、内嵌阴影、彩色光晕、聚焦样式的轮廓环和一个悬浮卡片。渐变在另一个标签页中；文本阴影和 drop-shadow() 滤镜不在支持范围内。
隐私
阴影的生成和预览完全在本页面中完成，你的图层只保存在这个浏览器的本地存储中，刷新后仍然保留。任何设置和设计都不会发送到服务器。