CSS 阴影生成器
拖动滑块，示例会跟着变。一层不够就叠加图层 — 真实界面里那种柔和可信的立体感就是这样做出来的。
阴影
图层
文字阴影没有扩展值和内阴影：CSS 不接受它们，多写一个值会让整条声明失效。
预设
- 免费
- 文件不会离开你的设备
- 无需注册
- 不限文件数量
使用方法
- 先选择要给谁加阴影：方块还是文字。
- 设置偏移、模糊和颜色，示例会立刻重绘。
- 需要层次就加一层：两三层淡阴影比一层浓阴影更耐看。
- 复制控件下方那行 CSS。
实用说明
文字阴影为什么设置更少
text-shadow 只接受偏移、模糊和颜色。扩展值和内阴影是 box-shadow 独有的，多写一个值就会让整条声明失效 — 浏览器悄悄丢弃它，阴影干脆不见。所以切换到文字模式时这两个控件直接隐藏，而不是指望它们被忽略。
几层淡阴影胜过一层浓阴影
真实的阴影并不均匀：紧贴物体处浓重，越远越淡。一层大模糊只会得到一圈灰雾，而两三层不同偏移、低不透明度的阴影才能做出精致界面里那种层次。工具把每一层单独保存，复制出来的那行按顺序列出它们。
常见问题
扩展值是干什么的？
它在模糊之前放大或收缩阴影。负值把阴影收进来，使它不从两侧露出 — 卡片上那种干净阴影正是这么做的，光晕应该留在方块下面而不是围在四周。
怎么做内阴影？
勾选「内阴影」，行首会出现 inset，阴影移到方块内部。按下状态的按钮和输入框常用它，那里的立体感应该读作凹陷而不是凸起。
为什么我的阴影看不见？
多半是不透明度为零，或者偏移和模糊都是零，阴影正好藏在方块背后。如果父元素设了 overflow: hidden，而阴影落在可见区域之外，它也会消失。
所有浏览器都支持吗？
支持。box-shadow 和 text-shadow 多年前就是标准，不需要任何前缀；这里生成的值是纯 CSS，没有厂商扩展。
相关工具
- CSS 渐变生成器 拖动滑块，上方的预览会跟着变化。满意之后复制那一行，粘贴进样式表就行了，不需要别的。
- 配色生成器 选一个起始颜色，工具会按色轮算出其余的颜色。点击任意色块即可复制色值，或者放入一张照片，直接从中取出配色。
- CSS 格式化 粘贴样式表——哪怕它只有一行——就能重新读懂。每条声明单独一行，嵌套块获得应有的缩进，注释留在它该在的位置。
- CSS 压缩 粘贴样式表，拿回压缩后的版本。输入框下方的计数显示压缩前后的体积，你能直接看出这么做值不值。
- 颜色转换器 用任何常见写法输入颜色——#1f5fd6、1f5fd6、#1f5、rgb(31, 95, 214)——其余写法会同时出现，还附带保证文字可读所需的对比度数值。
- 密码生成器 打开页面即生成新密码，使用浏览器的加密级随机数生成器。密码不会被发送、记录或保存。
- 二维码生成器 输入链接或任意文本，二维码随打随现。屏幕使用下载 PNG，印刷则选 SVG——放到多大都依然清晰。
- UUID 生成器 按下按钮，就能得到可以直接贴进数据库、配置文件或测试数据的标识符。它们在页面内生成——没有哪台服务器会给你一个别人已经见过的号码。