What types of gradients can I create?

This tool generates CSS linear gradients. You can choose from 8 directions including horizontal, vertical, and diagonal angles.

How do I copy the CSS code?

Click the copy button next to the generated CSS code at the bottom of the tool to copy it to your clipboard.

Yes. Click the swap button between the two color pickers to reverse the gradient direction.

Yes. The linear-gradient CSS property is supported by all modern browsers including Chrome, Firefox, Safari, and Edge.

Pick two colors, choose a direction, and get the CSS code for your gradient.

Start Color

#3B82F6

End Color

#8B5CF6

Direction

background: linear-gradient(to right, #3b82f6, #8b5cf6);

Step 1

Choose a start color using the first color picker.

Step 2

Choose an end color using the second color picker.

Step 3

Select a gradient direction from the options.

Step 4

Copy the generated CSS code with one click.

Live gradient preview that updates in real-time.

8 direction presets including diagonal angles.

One-click CSS code copy to clipboard.

Swap colors button to quickly reverse gradients.

Completely free with no sign-up required.

: This tool generates CSS linear gradients. You can choose from 8 directions including horizontal, vertical, and diagonal angles.
: Click the copy button next to the generated CSS code at the bottom of the tool to copy it to your clipboard.
: Yes. Click the swap button between the two color pickers to reverse the gradient direction.
: Yes. The linear-gradient CSS property is supported by all modern browsers including Chrome, Firefox, Safari, and Edge.