Gradient Generator Tool

90°
background: linear-gradient(90deg, #ff0000, #0000ff);
background: radial-gradient(circle, #ff0000, #0000ff);
background: rgb(255, 0, 0);

How to use this tool?

  • Select two colors using the color pickers (Pick Color 1, Pick Color 2).
  • Adjust the gradient angle using the slider.
  • Linear, RGB and Radial Codes are generated real-time.
  • Click on any of the pre-created gradient boxes to quickly apply them.
  • Copy the generated CSS code using the "Copy CSS" buttons.
  • Use the CSS code in your projects for a beautiful gradient background.



© jQuery-AZ 2025. All Rights Reserved.