CSS 渐变与阴影生成器

在预览的同时构建渐变和盒阴影,然后复制 CSS 代码。

渐变

色标 1
色标 2

可使用 2 到 5 个色标,输出时按位置从低到高排序。

预览

生成的 CSS

盒阴影

阴影层 1

最多可使用 4 个阴影层。

预览

生成的 CSS

CSS 渐变与阴影生成器使用方法

更改任何值后,预览和 CSS 代码会立即更新。满意后按复制 CSS,并粘贴到您的样式表中。

限制

常见问题

我的输入会发送到服务器吗?

不会。所有计算都在此浏览器内完成,您的输入和结果既不保存也不上传。重新加载后会恢复为初始值。

更改色标顺序会改变结果吗?

输出的 CSS 始终按位置从低到高排序。位置相同的色标保持您输入的顺序。

不透明度如何应用?

如果阴影颜色是带 alpha 的 8 位十六进制,则会乘以不透明度(%)并以 rgba() 输出。如果不透明,则以 6 位十六进制输出。