90°
生成的CSS代码
预设模板
可视化编辑线性渐变和径向渐变，实时预览，一键复制CSS代码
CSS渐变生成器是一种可视化创建CSS渐变背景样式的在线工具。渐变是现代Web设计中最常用的视觉效果之一，它可以让背景或元素从一种颜色平滑过渡到另一种（或多种）颜色，创造出丰富的视觉层次感。CSS支持线性渐变（linear-gradient）、径向渐变（radial-gradient）和锥形渐变（conic-gradient）三种类型。手动编写渐变代码需要记忆复杂的语法和参数，而通过可视化工具可以直观地拖拽色标、调整角度和位置，实时预览效果并自动生成规范的CSS代码，极大提升了开发效率。
使用渐变作为页面的主要背景或Hero区域的底色，创造视觉吸引力。多色渐变可以让简单的页面瞬间变得高级。
为按钮添加渐变背景并配合hover效果，创造有深度感的交互反馈。悬停时微调渐变色可以增强动效。
结合background-clip: text实现渐变文字效果，常用于标题和强调文本，提升视觉冲击力。
CSS渐变的三种类型使用不同的数学模型：
/* 线性渐变：沿直线方向过渡 */
background: linear-gradient(
135deg, /* 方向：角度或关键字 */
#667eea 0%, /* 色标：颜色 + 位置 */
#764ba2 100% /* 至少两个色标 */
);
/* 径向渐变：从中心向外辐射 */
background: radial-gradient(
circle at center, /* 形状(circle/ellipse) + 位置 */
#f093fb 0%,
#f5576c 100%
);
/* 锥形渐变：围绕中心点旋转 */
background: conic-gradient(
from 0deg, /* 起始角度 */
#ff0000 0deg,
#00ff00 120deg,
#0000ff 240deg,
#ff0000 360deg
);
/* 角度与方向关键字的对应 */
/* 0deg = to top, 90deg = to right, 180deg = to bottom */A：线性渐变适合创造方向感和层次感，常用于页面背景和按钮。径向渐变适合创造聚焦效果和光晕效果，常用于卡片装饰和弹窗遮罩。根据设计需求选择。
A：将两个相邻色标设置为相同位置即可。如linear-gradient(90deg, red 50%, blue 50%)会在50%处产生硬边分割，而不是模糊过渡。
A：可以。使用-webkit-background-clip: text将渐变裁剪为文字形状，配合-webkit-text-fill-color: transparent显示渐变文字。这是目前的标准做法。
A：45deg是精确的角度值，to top right是关键字。理论上它们指向同一方向，但实际计算有细微差异：45deg基于几何角度计算，关键字基于元素对角线。正方形元素中两者完全一致。
A：background-size设为200%配合background-position的transition/animation可以实现渐变动画效果。CSS渐变本身不能直接transition，但可以通过移动背景位置模拟。
CSS渐变生成器是一款可视化的CSS渐变代码生成工具，支持线性渐变、径向渐变、锥形渐变等多种渐变类型。您可以通过直观的界面添加色标、调整角度和位置，实时预览渐变效果，并一键复制可用的CSS代码。渐变是现代Web设计中最常用的视觉效果之一，能够为界面增添层次感和专业感。 本工具提供丰富的渐变类型和参数调节，满足各种设计需求。无论是简单的双色渐变还是复杂的多色渐变，都可以轻松实现。同时支持渐变角度调整、色标位置微调、颜色透明度设置等高级功能，让您的渐变设计更加精准。
渐变背景是按钮、卡片、徽章等UI元素最常用的设计手法之一。一个精心设计的渐变按钮比纯色按钮更具视觉吸引力和点击欲望。使用本工具可以快速生成各种风格的渐变效果，从简洁的双色渐变到华丽的多色渐变，都可以轻松实现。同时支持调节透明度，与毛玻璃效果搭配使用效果更佳。
网站首页的英雄区域（Hero Section）往往是访客最先注意到的地方，使用渐变背景可以营造出强烈的视觉冲击力。许多科技公司、SaaS产品的官网都采用渐变色作为背景主视觉。通过本工具的多色标渐变功能，可以创建复杂的彩色渐变，搭配文字和图形元素，打造出令人印象深刻的首屏体验。
在设计中，渐变不仅可以作为背景，还可以用来创建各种装饰元素，如渐变圆形、渐变线条、渐变文字等。CSS渐变是纯代码实现的，相比图片具有加载快、可缩放、易于修改等优势。使用本工具生成的渐变代码，可以直接应用于CSS的background属性，也可以应用于text-fill-color实现渐变文字效果。
CSS渐变是CSS3引入的图像类型（
A：CSS线性渐变的角度以度（deg）为单位，0deg表示从下到上（to top），90deg表示从左到右（to right），180deg表示从上到下（to bottom），270deg表示从右到左（to left）。角度是顺时针增加的。也可以直接使用to top、to right、to bottom right等方向关键词，更加直观。
A：CSS渐变是纯代码实现的，由浏览器直接渲染，不需要额外的网络请求，加载速度更快。同时，渐变是矢量的，可以无损缩放，不会失真。相比之下，背景图片需要下载，会增加页面加载时间，而且放大后会模糊。因此，在能够用渐变实现的情况下，优先使用CSS渐变。但复杂的视觉效果可能仍然需要图片。
A：实现渐变文字需要用到三个CSS属性配合：1）background设置为渐变；2）-webkit-background-clip: text（或background-clip: text），将背景裁剪到文字形状；3）color: transparent，让文字透明，透出背景渐变。注意：background-clip的text值在有些浏览器中需要加-webkit-前缀。示例代码：background: linear-gradient(red, blue); -webkit-background-clip: text; color: transparent;
A：可以。CSS允许多个背景图层叠加，渐变作为background-image的一种，也可以叠加多个，用逗号分隔。先写的渐变在上层，后写的在下层。需要注意的是，如果上层渐变完全不透明，会完全遮挡下层渐变。因此，叠加渐变通常用于创建半透明的效果，或者不同位置的渐变组合。例如，可以叠加一个线性渐变和一个径向渐变来创造更复杂的背景效果。
A：色标（color stop）是渐变中的一个颜色点，由颜色值和位置组成。位置可以用百分比（如50%）或长度值（如100px）表示。在两个色标之间，颜色会平滑过渡。如果不指定位置，色标会均匀分布。例如，两个颜色默认各占50%位置。您可以通过调整色标位置来控制渐变的节奏，让某种颜色占更多空间或更少空间。
A：支持。渐变中的颜色可以使用rgba()、hsla()或8位HEX等带Alpha通道的颜色值，从而实现半透明渐变效果。这在设计中非常有用，例如在图片上叠加半透明渐变来使文字更清晰可读，或者创建毛玻璃、玻璃拟态（Glassmorphism）效果。本工具的颜色选择器支持调节透明度，方便您创建各种透明度的渐变。
A：线性渐变和径向渐变在所有现代浏览器中都有很好的支持，包括Chrome、Firefox、Safari、Edge等。对于非常老的浏览器（如IE9及以下），需要使用IE特有的滤镜语法作为降级方案。锥形渐变（conic-gradient）的支持稍晚一些，但目前所有主流浏览器的最新版本都已支持。建议使用caniuse.com查询具体浏览器版本的支持情况。
除了CSS渐变生成器，我们还为您推荐以下实用工具，满足您更多的需求：