CSS渐变生成器
创建CSS线性和径向渐变。
颜色节点
0%
100%
方向
角度90deg
CSS输出
快速预设
驾驭CSS渐变
概述
想脱离纯色背景,CSS渐变是最简单的方法。`linear-gradient`、`radial-gradient`、`conic-gradient`三种,各产生不同视觉效果。此生成器视觉编辑颜色停止位置、角度、形状,实时预览。支持多色停止、透明度、重复图案。
工作原理
用滑块添加、移动、删除色停点。角度0-360度,径向选中心位置。生成的CSS包含多个备用语法,旧浏览器也工作。输出可直接粘贴CSS。
什么时候用
英雄区背景。按钮3D风效果。卡片微妙深度添加。头像占位符(锥形渐变虹色)。加载闪烁动画。品牌色柔和变化表达。
常见问题
CSS渐变比图像轻得多(几字节vs几百KB)。仅动画时注意GPU负载。