CSS 渐变与阴影生成器
在预览的同时构建渐变和盒阴影,然后复制 CSS 代码。
渐变
可使用 2 到 5 个色标,输出时按位置从低到高排序。
预览
生成的 CSS
盒阴影
最多可使用 4 个阴影层。
预览
生成的 CSS
CSS 渐变与阴影生成器使用方法
更改任何值后,预览和 CSS 代码会立即更新。满意后按复制 CSS,并粘贴到您的样式表中。
限制
- 颜色只接受 #RGB、#RGBA、#RRGGBB 或 #RRGGBBAA 形式的十六进制,开头的 # 可以省略。
- 超出范围的数字会被设为最接近的允许值。角度为 0–360,位置和不透明度为 0–100,偏移和扩展为 -200 到 200,模糊为 0–200。
- 数字最多使用 2 位小数。
- 径向渐变始终是从中心向外扩散的圆形。
常见问题
我的输入会发送到服务器吗?
不会。所有计算都在此浏览器内完成,您的输入和结果既不保存也不上传。重新加载后会恢复为初始值。
更改色标顺序会改变结果吗?
输出的 CSS 始终按位置从低到高排序。位置相同的色标保持您输入的顺序。
不透明度如何应用?
如果阴影颜色是带 alpha 的 8 位十六进制,则会乘以不透明度(%)并以 rgba() 输出。如果不透明,则以 6 位十六进制输出。