CSS 渐变生成器

使用实时预览和复制就绪的 CSS 构建线性、径向和圆锥渐变。调整停止、角度和形状 - 然后粘贴到样式表中。

CSS Gradient Generator

Live

Type

Angle135°

Stop 1

Stop 2

Third color stopStop 3

CSS output

background: linear-gradient(135deg, #c026d3 0%, #fb923c 50%, #f43f5e 100%);

Key capabilities

使用实时预览和复制就绪的 CSS 构建线性、径向和圆锥渐变。
在您的浏览器中运行
免费使用

使用方法

选择渐变类型和角度或位置。
添加或编辑色标。
复制生成的 CSS。

How this tool works

选择渐变类型和角度或位置。
添加或编辑色标。
复制生成的 CSS。

Recommended settings

首先使用默认选项，然后根据需要进行调整

Supported formats

Text / on-page input

File size and limits

在旧手机上，非常复杂的多层预览可能会感觉较慢。

Privacy

颜色和 CSS 生成器完全在您的浏览器中运行。预览和转换永远不会上传您的样式。

Common use cases

每当您需要时，都可以使用 CSS 渐变生成器：使用实时预览和可复制的 CSS 构建线性、径向和圆锥形渐变。

Troubleshooting

粘贴后预览看起来有所不同

检查页面上是否存在竞争 CSS（重置、继承颜色）。首先将生成的规则复制到独立的样式表中。

常见问题

这会上传我的 CSS 吗？

不需要。生成器和转换器在您的浏览器中运行并提供实时预览。

我需要一个帐户吗？

不。打开工具，调整控件，然后复制 CSS。