CSS渐变生成器 - 创建线性和径向渐变 在线
用实时预览创建CSS渐变。生成线性和径向渐变，复制CSS代码或导出为Tailwind类。
常见问题
什么是CSS渐变?
CSS渐变是完全使用CSS代码创建的两种或多种颜色之间的平滑过渡,无需图像文件。渐变可以是线性的(沿直线)、径向的(从中心点向外发散)或锥形的(围绕中心点)。它们轻量、可缩放,非常适合背景、按钮和UI元素。
线性渐变和径向渐变有什么区别?
线性渐变沿指定角度的直线过渡颜色(例如,从左到右、从上到下或对角线)。径向渐变从中心点向外过渡颜色,创建圆形或椭圆形图案。使用线性渐变实现方向性效果,使用径向渐变实现聚光灯或发光效果。
如何使用这个渐变生成器?
选择渐变类型(线性或径向),通过点击颜色选择器添加或调整色标,使用可视化选择器或输入框设置方向/角度,实时预览您的渐变,然后使用复制按钮复制CSS代码或Tailwind类。
什么是Tailwind CSS输出,我应该什么时候使用它?
Tailwind CSS是现代Web开发中流行的实用优先CSS框架。如果您的项目使用Tailwind,您可以将生成的类(如bg-gradient-to-r from-blue-500 to-purple-500)直接复制到HTML中。注意:Tailwind仅支持具有2-3个色标的线性渐变。
我可以添加多少个色标?
您可以在单个渐变中添加最多10个色标。每个色标可以有自己的颜色和位置(0-100%)。渐变显示至少需要2个色标。拖动渐变条上的标记来调整位置。
这个渐变生成器安全且隐私受保护吗?
是的。此工具使用客户端JavaScript 100%在您的浏览器中运行。渐变数据永远不会发送到任何服务器。所有生成和代码输出都在您的设备上本地进行,因此对于专有品牌颜色和机密设计工作是安全的。
代码示例
// Create CSS gradients programmatically
function createLinearGradient(angle, colorStops) {
const stops = colorStops
.map(stop => `${stop.color} ${stop.position}%`)
.join(', ');
return `linear-gradient(${angle}deg, ${stops})`;
}
function createRadialGradient(shape, position, colorStops) {
const stops = colorStops
.map(stop => `${stop.color} ${stop.position}%`)
.join(', ');
return `radial-gradient(${shape} at ${position.x}% ${position.y}%, ${stops})`;
}
// Usage
const linear = createLinearGradient(135, [
{ color: '#667eea', position: 0 },
{ color: '#764ba2', position: 100 }
]);
console.log(linear);
// linear-gradient(135deg, #667eea 0%, #764ba2 100%)
document.body.style.background = linear;