CSS渐变生成器

渐变类型

角度/中心 90°

色标编辑

预览

CSS代码

CSS渐变生成器简介

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

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

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

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

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

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

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

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

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