在线CSS渐变/阴影生成器 | 可视化CSS生成 | 唯爱工具箱

🌈 渐变背景
🌑 盒子阴影

渐变类型：

方向角度：90deg

渐变方向：

颜色1：

颜色2：

颜色3（可选）：

启用第三个色标

随机预设：

CSS代码：

水平偏移 (X)：0px

垂直偏移 (Y)：10px

模糊半径 (Blur)：20px

扩散半径 (Spread)：0px

阴影颜色：

30%

内阴影 (inset)

背景色：

CSS代码：

📖 使用说明

渐变功能

支持线性、径向、圆锥三种渐变
最多支持三个颜色色标
方向按钮与角度滑块二选一
内置常用渐变预设

阴影功能

调整X/Y偏移、模糊、扩散半径
支持透明度调节与内阴影
实时预览与代码同步生成
颜色选择器直接取色

使用场景

网页按钮、卡片背景设计
UI组件阴影效果调试
快速生成CSS代码嵌入项目
学习CSS渐变与阴影语法

🔗 相关工具

🎨 颜色转换

🎨 CSS格式化

🧹 代码格式化

🌐 HTML格式化