Gradient Maker

Create beautiful CSS gradients with ease. Customize colors, types, and angles, then copy the code.

How to Use This Tool

  1. Select a gradient Type (Linear or Radial) and adjust the Angle for linear gradients.
  2. For each color stop, use the color picker to change the color and the slider to adjust its Opacity.
  3. Drag the position slider for each color to define where it appears in the gradient.
  4. Click Add Color to add more stops or the trash icon to remove one (a minimum of two is required).
  5. Copy the generated CSS code from the box at the bottom right. The preview updates live.

Related Tools