How to Generate a CSS Linear or Radial Gradient

What the gradient generator does

Gradient Generator creates CSS text from two color values. Use it when you want a quick starting point for a background that blends two colors in a straight line or in a circular pattern. You can choose a linear or radial form and provide an angle for a linear gradient.

How to generate a gradient

1. Enter the first color value. This is the starting color in the generated CSS text.
2. Enter the second color value. This is the other color used in the gradient.
3. Choose the gradient type. Select linear for a directional blend or use the exact value radial for a circular radial gradient.
4. For a linear gradient, enter an angle in degrees. If you leave it out, the default is 45 degrees. The angle is converted to an integer and reduced to the 0-to-359-degree range. If the value cannot be converted, the tool uses 45 degrees instead.
5. Generate the result and copy the CSS text into the background declaration for the element you are styling.

If you do not provide either color, the tool supplies #ff6b6b as the first color and #4ecdc4 as the second. If you do not provide a gradient type, it uses linear. The supplied color values are inserted into the CSS text without a separate color-validation step, so enter values that are valid for the CSS you plan to use.

How to read the result

For a linear result, check that the CSS text includes the selected angle in degrees and both supplied color values. For a radial result, check that it uses the circular radial form and includes both colors.

An angle outside the usual turn is normalized rather than preserved as entered. For example, a value equivalent to 405 degrees is reduced modulo 360 after conversion to an integer. A nonnumeric angle falls back to 45 degrees.

The type value matters in a specific way: linear uses the linear format and radial produces the circular radial format. Any other type value uses the linear format, even though that supplied type value remains part of the returned data. This means an unrecognized label does not create a separate gradient format.

The generated text is a starting point for CSS, not a separate validation report. Review the color values and the resulting declaration before using it in your stylesheet.

Worked example

A designer wants a blue-to-amber background that runs along a 120-degree direction.

Enter #2563eb as the first color, #f59e0b as the second color, choose linear, enter 120, and generate the CSS text.

The result is CSS gradient text in linear form that includes the supplied angle in degrees and both supplied color values.

Limitations

• Color values are inserted into the generated CSS text without a separate validation step, so the result does not confirm that each value is valid CSS color syntax.

Common errors

• If the result contains an unusable color value, the likely cause is that the supplied text was inserted without separate color validation. Correct it by checking each color value against the CSS color syntax you intend to use, then generate the text again.

FAQ

How do I make a radial gradient?

Choose radial when you want the circular radial format. The result uses the two supplied color values in that form.

What happens if I leave the angle blank or enter an invalid angle?

For a linear gradient, enter the angle in degrees. If it is missing, the tool uses 45 degrees; if conversion fails, it also falls back to 45.

Does the tool validate my color values?

The tool inserts the supplied color values into the CSS text without a separate color-validation step, so review them as CSS color values before using the result.