CSS Gradient Generator

Create beautiful, smooth color transitions for your website backgrounds without using any images. This tool makes it easy to generate the perfect gradient.

1. Select Your Colors

Use the color pickers to choose your desired start and end colors. You can also paste in specific hex codes.

2. Choose Gradient Type and Angle

Select either a 'Linear' or 'Radial' gradient. If you choose linear, you can use the slider to adjust the angle and direction of the gradient.

3. Randomize for Inspiration

Feeling stuck? Click the "Randomize" button to generate new color combinations and angles instantly. It's a great way to discover new and exciting gradients.

4. Copy and Apply

Once you've created a gradient you love, click the copy button on the "Generated CSS" card. Paste this single line of CSS into your stylesheet to apply the background to any element.