Gradient Color Palette

Generate and customize beautiful gradient color combinations for your designs.

Gradient Preview

background: linear-gradient(101deg, #8A2BE2 0%, #FFFFFF 50%, #4169E1 100%);

Controls

101°

Stops

What is a Gradient?

A color gradient, also known as a color ramp or color progression, specifies a range of position-dependent colors, usually used to fill a region. This tool helps you create two types of gradients:

  • Linear Gradient: Progresses in a straight line from one color to another. You can change the angle to control the direction of the gradient.
  • Radial Gradient: Radiates from a central point. The colors progress from the center outwards.

You can add multiple "stops" to create complex, multi-color gradients. Each stop has a color and a position (from 0% to 100%) along the gradient line.