FANDOM


The tools below can be used to build CSS gradients for backgrounds. Set how many stops that you would like, positions of the stops, colors, and direction/epicenter of the gradient to create a gradient. Pressing submit shows a preview of your gradient and the code for the background-image properties in multiple compatibilities.

The stop positions are on a range of 0 to 100, so the start should be at 0 and the final stop should be at 100 unless you are making a repeating gradient.

If you choose to make a repeating gradient, the gradient will start repeating after the last defined color stop, so if you want the repetitions to be closer together, put your last color stop at a low number. If you want fewer repetitions, put your last color stop at a high number.

Tip: To prevent repeating gradients from abruptly changing colors, make sure the color of the last color stop matches the color of the first color stop.


Linear Gradient Builder

Please wait for the form to load.


Adjust the options and press Submit to see the changes.



Radial Gradient Builder

Please wait for the form to load.


Adjust the options and press Submit to see the changes.

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.