图像免费 · 每天 3 次在你的浏览器中处理
CSS 渐变生成器
可视化制作线性、径向和锥形渐变，并导出为 CSS 或 Tailwind。
类型
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%);
}
相关
同类工具
Da mesma categoria.