The format of a repeating radial gradient is background-image: repeating-radial-gradient(shape size at position, start-color, ..., last-color);
Using the above syntax as a guide, you can create your own gradient. Select a shape from the first select box, a size from the second select box and the position type from the third. If precision is selected you can choose, via a radio button, what type(pixel or percent) you would like to use to position the origin of your gradient. There are two values needed for this. If general is selected, you can use the select box to see and choose an option of where to position your gradient. The position type currently being used is highlighted with a lightgreen color. The other is highlighted in a lightred.
Click on the labeled button to add a new color. The '#' is provided in the textbox for every color added to allow for hexcode. You may use color names as well, just simply delete the '#' before placing the color name in the textbox.
To get rid of the px/%? in the code below, simply select the radio button option to use pixels or percent. Use the slider/range input to edit the number of pixels/percent This will need to be done for any new color added.
Need help finding colors in hexcode format? Visit coolors.co
Here are some basic gradient examples that you can replicate to get started:
Your Gradient CSS:
background: repeating-radial-gradient([shape]
[if(size == '' and position_type == '', ',', '')]
[size]
[if(position_type == '', '',
if(position_type == "general", gpos,
if(position_type == "precision", ' at ' &
if(precision_type1 == "precision_pixelsradio1", precision_pixelvalue1 & 'px',
if(precision_type1 == "precision_percentradio1", precision_percentvalue1 & '%',
'px/%?')) & ' ' &
if(precision_type2 == "precision_pixelsradio2", precision_pixelvalue2 & 'px',
if(precision_type2 == "precision_percentradio2", precision_percentvalue2 & '%',
'px/%?')) & ','
,
'position_type not precision')))]
[hexcolor & ' ' &
if(amount_type == "pixelsradio",
if(pixelsvalue == 0, '', pixelsvalue & 'px'),
if(amount_type == "percentradio",
if(percentvalue == 0, '',
percentvalue & '%'),
'px/%?') ) ]
);
Value1
Value2