配置
线性 135°，#667eea → #764ba2
CSS
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
设计配色
CSS 渐变生成 - 线性径向锥形工具
可视化生成线性、径向与锥形 CSS 渐变，可调节角度、色标位置并添加多个色标，适合背景、按钮和品牌色过渡设计。
CSS渐变背景
设计配色
CSS 渐变生成
135°
%
%
使用场景
- 设计页面或卡片背景渐变
- 为 UI 组件配置双色或多色过渡
- 导出可直接粘贴的渐变 CSS
如何使用
- 选择线性、径向或锥形
- 设置角度与色标颜色、位置，可添加更多色标
- 预览并复制 CSS 结果
示例输入输出
FAQ
支持哪些渐变类型？
支持 linear-gradient、radial-gradient 与 conic-gradient 三种。
可以加多个色标吗？
可以。点击「添加色标」后为每个色标设置颜色与 0–100 位置。
工具列表
相关推荐
你可以从这里继续打开相近场景的工具，减少重复搜索。
CSS 阴影生成
CSS 阴影生成 - box-shadow 可视化工具
可视化调节偏移、模糊、扩散、颜色、透明度和内阴影，实时预览并生成 box-shadow CSS，适合卡片、按钮和浮层阴影调试。
CSS 阴影 box-shadow
颜色格式转换
颜色格式转换 - HEX RGB HSL 在线工具
在浏览器本地将颜色在 HEX、RGB、HSL、HWB、CMYK 与 CSS 变量之间转换，支持取色器与随机色，适合设计稿取色、写样式和对齐品牌色。
颜色 HEX RGB
调色板生成
调色板生成 - 色彩规则配色在线工具
按单色、类似色、互补色、三角色或完全随机规则生成调色板，可锁定个别色块后继续随机，适合 UI 探索与品牌色衍生。
调色板 配色 色彩