CSS 渐变生成器
只需选择颜色和角度，即可在预览中生成 CSS 渐变代码
特点
预览和代码同时更新
每次改变颜色或角度时，外观和 CSS 同时变化
支持线性、径向、圆锥形
可详细指定角度、形状、中心位置等各种参数
最多 10 种颜色拖拽调整
颜色位置通过拖拽条形调整，透明度通过滑块调整
8 种样本和随机生成
从经典配色或随机配色开始微调
使用方法
1
选择类型
从线性、径向、圆锥形中选择渐变类型
2
确定颜色
通过颜色代码或样本选择颜色，点击"添加颜色"增加颜色数量并调整位置和透明度
3
调整方向
线性渐变设置角度或方向按钮，径向和圆锥形指定中心位置
4
复制代码
点击"复制"按钮将单行 CSS 粘贴到你的样式中
使用场景
创建英雄图像背景
无需编写代码即可决定网站顶部或按钮的背景颜色
博客标题配色选择
选择接近的配色样本来调整文章标题背景
覆盖在照片上的叠层
使用降低透明度的颜色在照片上创建半透明层
调整多色渐变
通过拖拽逐渐调整 3 种或更多颜色的边界位置
基础知识
linear、radial、conic 的区别
CSS 渐变有 3 个函数，颜色变化方式不同，都可以写在 background 属性中使用。
- linear-gradient：linear-gradient 是沿指定角度的直线改变颜色的线性渐变。
- radial-gradient：radial-gradient 是从中心位置向外扩展，以圆形或椭圆形改变颜色的径向渐变。
- conic-gradient：conic-gradient 是围绕中心位置顺时针旋转一周改变颜色的圆锥形渐变。
角度和方向关键字的对应关系
linear-gradient 的角度以 0deg 表示从下向上的方向，数值增大时顺时针旋转。角度也可以用"to right"等方向关键字表示，90deg 对应"to right"，180deg 对应"to bottom"。
色标和透明度的写法
色标（color stop）是渐变中显示该颜色的位置，0% 表示起点，100% 表示终点。例如"#3B82F6 0%, #8B5CF6 100%"是从起点的蓝色变为终点的紫色的指定方式。
- #RRGGBB 格式：#RRGGBB 格式用 2 位 16 进制数分别表示红、绿、蓝的强度，#FF0000 表示不透明的红色。
- rgba 格式：rgba 格式在红、绿、蓝的值（0～255）基础上添加透明度（0～1），透明度 0.5 表示半透明色。
安全性和隐私
浏览器内完成
输入数据仅在您的浏览器内处理，不会发送至外部。
仅在浏览器内处理
渐变代码生成完全在您的浏览器内进行，输入数据不会发送到服务器。
通信采用HTTPS加密
页面加载也通过TLS加密，第三方无法读取内容。
不向第三方发送
不向广告网络、跟踪器等外部服务发送输入内容。
结果不自动保存
选择的颜色和设置和输入建议不会保存到服务器。
在Google搜索中关注RAKKOTOOLS
185个实用工具，在Google搜索和AI搜索中更容易找到！
- 在搜索中找到
- 在AI搜索中也显示
- 发现新工具
更新信息
- update #312
新增CSS渐变生成器，选择颜色和角度生成代码