📖 CSS 渐变函数语法详解
linear-gradient()
沿直线方向混合两种或多种颜色，接受角度与任意数量的色标位置。
radial-gradient()
从单一原点向外辐射扩散，支持圆形、椭圆及多种边界范围。
conic-gradient()
围绕中心顺时针旋转过渡，适合色轮、雷达扫描与发光环效果。
Gradient Studio / Visual CSS Lab
CSS 渐变色生成器
可视化调配线性、径向与锥形渐变。拖动色标、实时预览，并快速导出适合生产环境的 CSS 或 Tailwind 代码。
{{ gradientType.toUpperCase() }} · {{ colorStops.length }} STOPS
MODERN GRADIENT CSS
background-clip: text; color: transparent;
Crafting Beautiful Interfaces
高对比度与无障碍文字排版实机测试
画布高度
// GRADIENT TYPE
// 角度 {{ linearAngle }}°
// SHAPE
// EXTENT
// 起始旋转角度 {{ conicAngle }}°
// 色标控制轴 · 点击添加，拖拽调整位置
ACTIVE STOP #{{ activeStopIndex + 1 }}
位置 {{ activeStop.position }}%
{{ preset.name }}
// Standard CSS
background: {{ gradientCssValue }};// Tailwind Arbitrary Class
bg-[{{ gradientCssValue.replace(/\s+/g,'_') }}]点击任意位置退出全屏