CSS 渐变生成器 (线性、径向、锥形)

选渐变类型, 设角度, 添加或移除颜色停点。实时预览。一键复制 CSS background 声明。

类型角度: 135°

CSS 代码background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);

工作原理

线性渐变: 颜色沿给定角度的直线过渡。0° 指向上, 90° 指向右 (默认阅读方向), 180° 指向下。背景、按钮、英雄区最常用。

径向渐变: 颜色从中心点向外过渡。形状可以是圆 (默认) 或椭圆。聚光效果、太阳元素或吸引注意的中心元素最佳。

锥形渐变: 颜色绕中心点旋转, 像色轮。较少见但对饼图、表盘、装饰性旋转器很强大。2020 年起现代浏览器支持。

每个颜色停点有颜色和 0% 到 100% 的位置。0% 是渐变起点, 100% 是终点。两个停点给平滑的两色渐变。中间加第三个停点根据位置创建三色混合或锐利带。

锐利过渡 (无混合) 在同位置放不同颜色的两个停点。例: '#000 50%, #fff 50%' 在中点创建黑到白的锐分。「条纹」背景就这么做。

渐变不像背景图需要 HTTP 请求, 原生渲染。无限放大不损失质量。动画友好: 通过 background-position 过渡或用自定义属性动画渐变停点。

无障碍: 别在复杂渐变上直接放文字, 如果对比度沿渐变变化。要么用纯色覆层, 要么确保渐变平均亮度与文字对比, 或用我们的对比检查器测试。WCAG AA 要求普通文字 4.5:1, 大文字 3:1。

›旧浏览器支持渐变吗?

线性和径向渐变在所有现代浏览器 (Edge、Firefox、Chrome、Safari, 2014 起) 都工作。锥形渐变需 Chrome 69+、Firefox 83+、Safari 12.1+ — 旧浏览器请回退到线性。

›可以在 React Native 或移动应用中用?

Web CSS 渐变不直接转换到 React Native — 用 `react-native-linear-gradient` 等库。颜色停点可转换, 但语法不同。iOS 和 Android 原生 UI 用平台特定 API。

›可以用色名吗?

可以。在颜色选择器旁的文本输入框, 把十六进制 (#ff0000) 替换为 CSS 色名 (red, dodgerblue 等)。

›我的锥形渐变看起来怪?

锥形渐变从你设置的角度顺时针旋转。覆盖完整 360° 旋转的多个停点时最美。仅 2 个停点常显得不完整。

›怎么创建「光晕」效果?

用径向渐变带完全透明终点: 例如 'radial-gradient(circle, rgba(255,200,0,0.6) 0%, transparent 70%)'。

›可以动画化渐变?

CSS 不直接动画化渐变停点, 但你可以动画化 background-position 实现移动效果, 或用 CSS 自定义属性 (变量) 与 JavaScript 更新。

›为什么 CSS 这么长?

每个停点添加颜色和位置。多停点的长渐变产生冗长 CSS。简单结果用 2-3 个停点。

›数据会上传吗?

不会。一切在本地计算; 不向服务器发送。