/ CSS 渐变色生成器 ← 首页

CSS 渐变色生成器 (Gradient Studio)

可视化调配 CSS 线性渐变、径向渐变与锥形渐变，支持自定义色标点、角度罗盘、精美预设与一键导出代码或 PNG 图片。

// 实时渲染画布 (Live Preview)
盒子背景 文字镂空 图文对比 全屏预览
{{ gradientType.toUpperCase() }} · {{ colorStops.length }} STOPS
MODERN GRADIENT CSS
background-clip: text; color: transparent;

Crafting Beautiful Interfaces

高对比度与无障碍文字排版在渐变背景上的实机呈现测试

画布高度:
圆角:
导出为 PNG 图片
// 渐变模式 (Gradient Type)
线性 Linear 径向 Radial 锥形 Conic
// 渐变角度: {{ linearAngle }}°
// 形状 (Shape)
// 扩散范围 (Extent)
// 起始旋转角度: {{ conicAngle }}°
⇄ 反转色标 ⇶ 均匀分布 🎲 随机配色
// 色标控制轴 (点击色轴任意位置可新增色标，拖拽控制点调节位置) 当前选中色标: #{{ activeStopIndex + 1 }}
{{ activeStop.color }}
位置 (0% ~ 100%)
➕ 新增色标 🗑️ 删除此色标

🎨 精选渐变预设库 (Curated Presets)

全部 赛博科技 晚霞暖光 自然清新 深邃暗夜
{{ preset.name }}
// CSS / Tailwind 代码输出
📋 复制 CSS 代码 ⚡ 复制 Tailwind 类
// Standard CSS
background: {{ gradientCssValue }};
// Tailwind Arbitrary Class
bg-[{{ gradientCssValue.replace(/\s+/g, '_') }}]

📖 CSS 渐变函数语法详解

linear-gradient()

沿一条直线方向混合两种或多种颜色。接受角度（如 135deg、to bottom right）以及任意数量的色标位置。

radial-gradient()

从单一原点向外辐射扩散过渡，支持圆形 (circle) 或椭圆 (ellipse)，以及到最近/最远角侧的边界范围。

conic-gradient()

围绕中心点顺时针旋转过渡（形如饼图或色轮），非常适合制作现代雷达扫描、彩虹色轮或发光环形效果。

拓展时间: 2026-08-31
点击任意位置退出全屏