🎨

渐变生成器

通过实时预览和即时代码输出，轻松创建漂亮的 CSS 线性渐变和径向渐变。

css design color generator

Gradient Settings

deg

Color Stops

Preview & Output

Live Gradient Preview

CSS Output

About Gradient Generator

The Gradient Generator helps you create beautiful CSS gradients for your web projects. Easily design linear and radial gradients with custom colors and positions, then instantly copy the generated CSS code.

Features:

  • Create linear and radial gradients
  • Customize angle for linear gradients
  • Choose shape and position for radial gradients
  • Add multiple color stops with precise positioning
  • Live preview of your gradient
  • Instant CSS output, ready to copy and use

How to use:

  1. Choose your desired gradient type: Linear or Radial.
  2. Adjust the settings (angle for linear, shape/position for radial).
  3. Add and remove color stops, selecting colors and their positions.
  4. See the live preview update as you make changes.
  5. Copy the generated CSS code from the output field.