ProUtils

CSS渐变生成器

用可视化构建器创建漂亮的CSS渐变。

135°
0%
100%
background: linear-gradient(135deg, #0d9488 0%, #3b82f6 100%);

How to Use

  1. 1

    Choose Linear or Radial gradient type.

  2. 2

    Add color stops and adjust their colors and positions using the controls.

  3. 3

    Copy the generated CSS code and paste it into your stylesheet.

Features

Linear & Radial Gradients

Create both linear gradients with custom angles and radial gradients for diverse design needs.

Multiple Color Stops

Add as many color stops as you like and adjust their positions with precision sliders.

Visual Preview

See a live preview of your gradient update in real time as you adjust the settings.

Copy CSS Code

Copy the ready-to-use CSS background-image gradient code with one click.

FAQ

支持哪些渐变类型?

自定义角度的线性渐变和多色停点的径向渐变。

能添加多个色停吗?

能,用滑块调整位置。

相关工具

开发者工具