Random Gradient Generator

Create random CSS linear gradients with two or three colors, edit HEX values, and copy or download the CSS.

You might also need: Website Color Palette Preview , Readable Text Color Generator , 5-Color Palette Generator and more

More color tools

Number of colors

Angle (degrees)

Choose a whole number from 0° to 360°. At 0°, the gradient points upward; at 90°, it points right.

Gradient colors

Enter 3 or 6 HEX digits, with or without #. Transparent colors are not supported.

Color 1

Color 2

Generate new colors while keeping the selected angle. Color and angle edits update the preview and CSS immediately.

Gradient preview

CSS background code

.gradient {
  background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
}

How to create a random CSS gradient

Choose two or three color stops and set an angle from 0° to 360°.
Generate random colors, use the color pickers, or enter your own 3- or 6-digit HEX values.
Preview your background, then copy the CSS or download random-gradient.css. Apply the gradient class to an HTML element.

Ideas for website backgrounds

Create a two-color blue and violet background for a landing page hero.
Try three colors for a presentation card, dashboard header, or portfolio section.
Keep your brand colors and change the angle to compare background directions.

Frequently asked questions

Can I edit a randomly generated gradient?

Yes. Change each HEX color with the text field or color picker, then adjust the angle. The preview and CSS use the same settings.

Which color formats and gradient types are supported?

This tool creates opaque CSS linear gradients with two or three evenly spaced stops. It accepts 3- and 6-digit HEX colors. Alpha, radial gradients, and custom stop positions are not supported.

What happens if a HEX color or angle is invalid?

A validation message appears, the old preview and CSS are cleared, and copying and downloading are disabled until the settings are valid.

Can I use the CSS in my website?

Yes. Copy the .gradient rule into your stylesheet and add class="gradient" to your element. The download contains the same rule shown in the preview panel.

Color generation and editing happen in your browser. The tool does not send your HEX values or generated CSS to the server. Standard site ads and analytics may still load.

Find this tool useful? Share it with your team to speed up your workflow.

If you like it, tap to support it; if it needs improvements, tap and we’ll prioritize updates.