ToolCraft
首页AI工具开发者工具单位转换图片工具
ToolCraft

© 2026 ToolCraft. All rights reserved.

隐私政策服务条款
DMCA.com Protection Status
首页颜色与设计CSS渐变生成器

颜色与设计

颜色选择器和转换工具CSS渐变生成器颜色转换器调色板生成器对比度检查器颜色混合器色调生成器Tailwind颜色查找CSS渐变生成器图片取色器随机颜色生成器颜色名称查找色盲模拟器色轮品牌颜色Tailwind 调色板生成器

CSS渐变生成器

实时预览创建CSS渐变并导出代码

%
%
CSS
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Tailwind
bg-gradient-to-br from-[#667eea] to-[#764ba2]

查看全部 颜色与设计

查看全部
100% 离线

颜色选择器和转换工具

选择颜色并在HEX、RGB、HSL之间转换,带WCAG对比度检查

颜色与设计
100% 离线

颜色转换器

在HEX、RGB、HSL、HSV和CMYK格式之间转换颜色

颜色与设计
100% 离线

调色板生成器

从基础色生成和谐的调色板

颜色与设计
100% 离线

对比度检查器

按WCAG无障碍标准检查颜色对比度

颜色与设计

什么是CSS渐变生成器?

CSS渐变生成器是一款免费在线工具,可帮助您通过可视化界面轻松创建线性渐变和径向渐变效果,实时预览并一键导出CSS代码。无论是网页背景、按钮样式还是装饰性元素,渐变都能为设计增添现代感和层次感。 渐变(Gradient)是CSS3引入的强大特性,它允许在两种或多种颜色之间创建平滑过渡。线性渐变(linear-gradient)沿一条直线变化,可以设置角度和方向;径向渐变(radial-gradient)从中心点向外扩散。通过调整色标的位置和数量,可以创造出从简约到复杂的各种视觉效果。 本工具提供直观的操作方式:拖动色标调整位置,旋转角度改变方向,还内置了多种精美预设供您直接使用或作为起点进行修改。生成的CSS代码兼容所有现代浏览器,可直接复制到项目中使用。所有操作完全在浏览器中完成。

CSS渐变语法

线性渐变语法: background: linear-gradient(角度, 颜色1 位置1, 颜色2 位置2, ...); 示例: background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #4facfe 100%); 径向渐变语法: background: radial-gradient(shape, 颜色1 位置1, 颜色2 位置2, ...);

FAQ