图像Processado no seu navegador
CSS 渐变生成器
以视觉方式创建线性、径向和圆锥渐变，并立即将它们导出为 CSS 或 Tailwind。
今日已使用 0/3 次 · 剩余 3 次。升级Pro，解除限制。.
类型
linear
色标
3/8
导出
CSS + Tailwind
Mesh
Mesh 已启用
01
预览与代码
基础颜色
颜色 01
#8C6A2D
渐变起始基色。
颜色 02
#D3B06F
渐变结束基色。
CSS
background: radial-gradient(circle at 28% 24%, rgba(243, 223, 178, 0.2) 0%, rgba(243, 223, 178, 0) 34%), radial-gradient(circle at 78% 68%, rgba(192, 141, 59, 0.18) 0%, rgba(192, 141, 59, 0) 42%), linear-gradient(135deg, #8C6A2D 0%, rgba(211, 176, 111, 0.96) 52%, #2B1D08 100%);
Tailwind
bg-[radial-gradient(circle_at_28%_24%,_rgba(243,_223,_178,_0.2)_0%,_rgba(243,_223,_178,_0)_34%),_radial-gradient(circle_at_78%_68%,_rgba(192,_141,_59,_0.18)_0%,_rgba(192,_141,_59,_0)_42%),_linear-gradient(135deg,_#8C6A2D_0%,_rgba(211,_176,_111,_0.96)_52%,_#2B1D08_100%)]
02
色标与构图
色标
#8C6A2D
0% · 100%
位置
不透明度
#D3B06F
52% · 96%
位置
不透明度
#2B1D08
100% · 100%
位置
不透明度
03
几何设置
类型与方向
类型
角度
135°
中心与选项
中心 X
50%中心 Y
50%重复渐变
为分隔符、图案与产品线提供实用的节奏感。
04
高级输出
Mesh 叠加
为视觉英雄区与有层次感的页面表面提供叠加效果。
2 层
background: radial-gradient(circle at 28% 24%, rgba(243, 223, 178, 0.2) 0%, rgba(243, 223, 178, 0) 34%), radial-gradient(circle at 78% 68%, rgba(192, 141, 59, 0.18) 0%, rgba(192, 141, 59, 0) 42%), linear-gradient(135deg, #8C6A2D 0%, rgba(211, 176, 111, 0.96) 52%, #2B1D08 100%);
令牌包
包含 Hero、Surface 与 Accent 的 CSV 文件,可即时落地实现。
:root {
--gradient-stop-1: #8C6A2D;
--gradient-stop-2: #D3B06F;
--gradient-stop-3: #2B1D08;
--gradient-css: radial-gradient(circle at 28% 24%, rgba(243, 223, 178, 0.2) 0%, rgba(243, 223, 178, 0) 34%), radial-gradient(circle at 78% 68%, rgba(192, 141, 59, 0.18) 0%, rgba(192, 141, 59, 0) 42%), linear-gradient(135deg, #8C6A2D 0%, rgba(211, 176, 111, 0.96) 52%, #2B1D08 100%);
}
§ 如何使用
如何可视化生成 CSS 渐变
创建线性、径向或锥形渐变，实时预览，一键复制即用的 CSS 代码。
选择渐变类型
线性（最常见，方向性过渡）、径向（从中心向外扩散）或锥形（扫弧形式，非常适合图表）。
设置颜色与色标
添加两个或更多颜色，拖动调整每个色标的位置。颜色支持 HEX、RGB 或 HSL 格式。
调整角度或中心点
线性：0deg（垂直）、90deg（水平）、45deg（对角线）。径向：以像素或 % 设置原点位置。
复制 CSS 代码
生成的代码可直接粘贴到样式表中，并附带 -webkit/-moz 前缀，兼容性最佳。
相关
相关工具
Da mesma categoria.