CSS渐变生成器

功能说明

CSS渐变生成器是一款在线可视化编辑工具，支持linear-gradient（线性渐变）、radial-gradient（径向渐变）、conic-gradient（圆锥渐变）三种类型。

功能特点：可视化编辑色标（颜色、位置）、实时预览渐变效果、一键复制CSS代码、支持角度/中心点调节。

适用于网页背景、按钮样式、卡片装饰等场景。所有操作在本地完成，生成的CSS代码可直接复制到项目中。

使用步骤

1. 选择渐变类型（线性/径向/圆锥）。

2. 调节角度或中心点位置。

3. 添加/删除色标，调整颜色和位置。

4. 实时预览效果，复制CSS代码到项目中。

常见问题

线性渐变的角度如何计算？

0°表示从下到上，90°表示从左到右，180°表示从上面到下面，270°表示从右到左。

如何创建硬边渐变？

将两个色标的位置设置为相同值，即可创建硬边效果。例如：#ff0000 50%, #0000ff 50%。

你可能还想问

linear-gradient 的角度怎么理解？

角度指渐变方向指向的方位：0deg 向上、90deg 向右、180deg 向下；to right 等关键词与之等价，拖拽色标生成的角度值可直接复制使用。

为什么渐变在浏览器里有色带（断层）？

相邻颜色过于接近且跨度大时，8 位色深的过渡会出现条带；缓解办法是叠加噪点纹理、拉大色标间距或减少中间色标数量。

径向渐变能做圆形光斑吗？

可以。radial-gradient 配 circle 关键字与 transparent 边缘，常用于按钮高光、氛围光斑；叠加多层不同透明度的径向渐变可做出柔和的辉光效果。

相关工具

相关内容