json随机生成工具
xml随机生成工具
前端开发快捷键
网页设计常用色彩搭配表
48色蜡笔颜色,彩铅色彩
180款常用渐变色
配色大全
在线字体查看器(支持iconfont/woff)
更多
CSS渐变生成器 - 在线渐变背景生成工具
渐变设置
渐变类型
线性渐变 (linear-gradient)
径向渐变 (radial-gradient)
圆锥渐变 (conic-gradient)
方向角度
(
0
°)
预设方向
→
↘
↓
↙
←
↖
↑
↗
形状
椭圆 (ellipse)
圆形 (circle)
大小
最远角 (farthest-corner)
最近角 (closest-corner)
最远边 (farthest-side)
最近边 (closest-side)
中心X
(
50
%)
中心Y
(
50
%)
起始角度
(
0
°)
中心X
(
50
%)
中心Y
(
50
%)
预设渐变
日落渐变
海洋渐变
紫色渐变
彩虹渐变
重置渐变
颜色停止点
添加
删除
选择颜色停止点
停止点 1
停止点 2
颜色
透明度
(
100
%)
位置
(
0
%)
所有停止点
快速颜色
效果预览
实时预览渐变效果
CSS代码
复制代码
导出图片
CSS属性：
background: linear-gradient(0deg, #ff0000 0%, #0000ff 100%);
完整CSS规则：
.gradient-element { background: linear-gradient(0deg, #ff0000 0%, #0000ff 100%); }
包含浏览器前缀
使用说明
渐变类型
线性渐变:
沿直线方向的颜色过渡
径向渐变:
从中心向外辐射的颜色过渡
圆锥渐变:
围绕中心点旋转的颜色过渡
颜色设置
颜色停止点:
定义渐变中的颜色位置
透明度:
控制颜色的不透明度
位置:
颜色在渐变中的位置百分比
实用技巧
预设渐变:
快速应用常用的渐变效果
实时预览:
所有修改立即显示效果
一键复制:
直接复制生成的CSS代码
