Gradient Background Generator

Create beautiful, custom gradients for your projects. This tool helps you build stunning gradients with full control over colors, type, and direction.

How to Use

1. Select Gradient Type: Choose between Linear, Radial, or Conic gradients from the dropdown menu.

2. Manage Colors: Click the color swatches to open a color picker, or enter a hex value directly. You can add up to 10 colors using the "Add Color" button. To remove a color, click the red × button (a minimum of 2 colors is required).

3. Adjust Angle: For linear gradients, use the slider to change the gradient's angle. The change will be reflected in the live preview.

4. Preview and Copy: The preview box shows your live gradient. Once you're happy with the result, copy the generated CSS code from the box below it.

Controls

90 deg

Preview

CSS Code

background: linear-gradient(90deg, #ff0000, #0000ff);