分类: 开发工具
CSS 阴影生成器
调出一个 box-shadow 并复制 CSS
调整偏移、模糊、扩散、颜色和不透明度，一边看实时预览，一边复制可直接粘贴的 box-shadow 声明。所有绘制都由你自己的浏览器完成。
输出
box-shadow: 0px 8px 24px -4px rgba(23, 33, 28, 0.24);
本页的所有处理都在浏览器中完成，不会上传任何内容。
这个工具能做什么
box-shadow 按固定顺序接受五个值，其中任何一个稍有变化，屏幕上的观感都会相差很远，因此凭空去写并不好受。这个工具会在你拖动滑块时，把真正的声明画在预览方块上。还可以加上第二层更紧的接触阴影——设计师正是用这种搭配让元素显得被抬起，而不是一片模糊——内阴影则把阴影翻到内侧，用来表现凹陷的表面。
使用方法
- 设置水平和垂直偏移、模糊与扩散。
- 选择阴影颜色和不透明度，需要时开启内阴影或接触层。
- 把 box-shadow 声明复制到你的样式表里。
隐私说明
本工具完全在你的浏览器中运行。输入的内容不会被上传、保存或分享，关闭标签页即随之消失。
常见问题
- 会上传任何东西吗？
- 不会。预览是浏览器绘制的 CSS 阴影，声明也是在页面里拼出来的。
- 扩散是做什么的？
- 扩散在模糊之前把阴影放大或收缩。负的扩散会把阴影往里收，这正是防止柔和阴影从元素两侧漏出来的办法。
- 为什么要用两层？
- 只有一层又宽又柔的阴影，看起来往往像雾。在元素附近再叠一层小而深的阴影，就有了接触边缘，两层合在一起才读得出高度。