Gradient Creator

Professions

This tool lets a user pick the start and end colors to display a gradient box based on these values. The user can even pick from Tailwind colors. This will give CSS linear-gradient results for both HSL and RGB values.

Start Color

Hue

Saturation

Lightness

Tailwind

End Color

Hue

Saturation

Lightness

linear-gradient(180deg, rgb(230,25,25), rgb(25,25,230))

linear-gradient(180deg, hsl(0 80% 50%), hsl(240 80% 50%))

General Help

Click on the button to share this tool with others.

Gradient Creator Help

Sliders

Use the top sliders to adjust the gradient start color.

Use the bottom sliders to adjust the gradient end color.

Tailwind Cards

This is the Tailwind color based on the selected color (or nearest match to it denoted by ‘exact’, ‘close’ or ‘far off’).

There is one each for the start and end colors.

Click the button to display a dialog with all the Tailwind colors.

The colored button shows the name and hex value.

If you click the colored button it will become the selected color.

Result

When you are happy with the final result, you can click one of the buttons to copy the calculated CSS to the clipboard.