CSS 阴影生成器
叠加几层柔和的阴影，效果更自然，然后复制 CSS。
已封存在本设备上
在浏览器中运行，不上传任何内容。
已封存
预览
阴影层
预设
还没有阴影。添加一层开始吧。
CSS 代码
使用方法
-
从预设开始
选择柔和、多层、悬浮、锐利或内凹阴影作为起点。
-
调整图层
调整每层的偏移、模糊、扩展、颜色和不透明度，也可以添加或删除图层，预览会实时更新。
-
复制 CSS
复制 box-shadow 声明，粘贴到你的样式表中。
常见问题
模糊和扩展有什么作用？
模糊让阴影边缘变柔和：数值越大，阴影越分散。扩展会在模糊之前放大或缩小阴影。负的扩展值配合较大的模糊，就能得到现代界面中常见的柔和浮起效果。
为什么要用多层阴影？
真实的阴影在靠近物体处有一个深而紧的核心，离得越远光晕越柔和宽广。叠加一层小而锐利的阴影，再加一两层更大更淡的阴影，就能还原这种效果，比单层阴影自然得多。
什么是内阴影？
内阴影绘制在元素内部而不是外部，让表面看起来是凹陷的，很适合输入框或按下状态的按钮。
这个阴影在所有浏览器中都能用吗？
能。代码中使用的 box-shadow、多层阴影和 rgb() 颜色语法，所有当前主流浏览器都支持。
box-shadow 会拖慢页面吗？
静态阴影的绘制开销很小。在大量元素上使用很大的模糊，或者直接给阴影做动画，开销会更大。想让阴影动画更流畅，可以改为给带阴影的伪元素做不透明度渐变。