Gradient Background Loop Generator

To create a custom gradient background loop with colors of your choice, replace the hex color values in the URL below. Then open the URL a new tab.

For example:

Let’s use the colors from this beach color palette: #96ceb4 #ffeead #ff6f69 #ffcc5c #88d8b0

If we take these hex color values and add them into the URL, the result is:


  • The first and last color should be the same in order to loop smoothly.
  • Only works when using with 6 colors. If your URL has less than 6 colors you can expect unexpected behaviors.

Explore some examples: