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
template = Gradient
form = gradin
result = gradout
param = direction|Direction|To Bottom|select|To Bottom,To Top,To Right,To Left,To Bottom Right,To Bottom Left,To Top Right,To Top Left
param = repeat|Repeating?|No|check|Yes,No
param = stop1|Stop 1?|Yes|check|Yes,No
param = stop2|Stop 2?|Yes|check|Yes,No
param = stop3|Stop 3?|No|check|Yes,No
param = stop4|Stop 4?|No|check|Yes,No
param = stop5|Stop 5?|No|check|Yes,No
param = stop6|Stop 6?|No|check|Yes,No
param = stop7|Stop 7?|No|check|Yes,No
param = stop8|Stop 8?|No|check|Yes,No
param = stop9|Stop 9?|No|check|Yes,No
param = pos1|Start Position|0|number|0-100
param = pos2|Stop 2 Position|0|number|0-100
param = pos3|Stop 3 Position|0|number|0-100
param = pos4|Stop 4 Position|0|number|0-100
param = pos5|Stop 5 Position|0|number|0-100
param = pos6|Stop 6 Position|0|number|0-100
param = pos7|Stop 7 Position|0|number|0-100
param = pos8|Stop 8 Position|0|number|0-100
param = pos9|Stop 9 Position|0|number|0-100
param = hue1|Stop 1 Color||color|
param = hue2|Stop 2 Color||color|
param = hue3|Stop 3 Color||color|
param = hue4|Stop 4 Color||color|
param = hue5|Stop 5 Color||color|
param = hue6|Stop 6 Color||color|
param = hue7|Stop 7 Color||color|
param = hue8|Stop 8 Color||color|
param = hue9|Stop 9 Color||color|
Please wait for the form to load.
Adjust the options and press Submit to see the changes.
Radial Gradient Builder
template = Gradient2
form = grad2in
result = grad2out
param = direction|Epicenter|Center|select|Left Top,Center Top,Right Top,Left Center,Center,Right Center,Left Bottom,Center Bottom,Right Bottom
param = shape|Shape|Circular|select|Circular,Elliptical
param = repeat|Repeating?|No|check|Yes,No
param = stop1|Stop 1?|Yes|check|Yes,No
param = stop2|Stop 2?|Yes|check|Yes,No
param = stop3|Stop 3?|No|check|Yes,No
param = stop4|Stop 4?|No|check|Yes,No
param = stop5|Stop 5?|No|check|Yes,No
param = stop6|Stop 6?|No|check|Yes,No
param = stop7|Stop 7?|No|check|Yes,No
param = stop8|Stop 8?|No|check|Yes,No
param = stop9|Stop 9?|No|check|Yes,No
param = pos1|Start Position|0|number|0-100
param = pos2|Stop 2 Position|0|number|0-100
param = pos3|Stop 3 Position|0|number|0-100
param = pos4|Stop 4 Position|0|number|0-100
param = pos5|Stop 5 Position|0|number|0-100
param = pos6|Stop 6 Position|0|number|0-100
param = pos7|Stop 7 Position|0|number|0-100
param = pos8|Stop 8 Position|0|number|0-100
param = pos9|Stop 9 Position|0|number|0-100
param = hue1|Stop 1 Color||color|
param = hue2|Stop 2 Color||color|
param = hue3|Stop 3 Color||color|
param = hue4|Stop 4 Color||color|
param = hue5|Stop 5 Color||color|
param = hue6|Stop 6 Color||color|
param = hue7|Stop 7 Color||color|
param = hue8|Stop 8 Color||color|
param = hue9|Stop 9 Color||color|
Please wait for the form to load.
Adjust the options and press Submit to see the changes.
