CSS Gradient Generator

This tool will help you generate a linear, radial or conical CSS gradient. It allows gradients to be created using multiple layers to create some interesting patterns. Try out the different color palettes on the random gradient generator or see the examples to get a feel for what is possible.

FAQ

Can I use CSS gradients in all browsers?

Almost all browsers at least support the linear-gradient and radial-gradient values for image properties such as background and background-image.

The support for conic-gradient is almost as good, with the exception for Internet Explorer. Even if it is important to support Internet Explorer on your site, it may or may not be so important to show conic gradients.

What should I do to support as many browsers as possible?

Just put a fallback value before your preferred value, such as a solid color. You can even stack multiple fallbacks in (reverse) order of preference:

background: #48abe0;
background: linear-gradient(90deg, white 0%, #48abe0 100%);
background: conic-gradient(from 180deg, white 0%, #48abe0 100%);

How do I make my random gradients look good?

Randomly generated gradients can easily look like something straight out of the 90's. Try generating a few gradients and use some different color pallets until you find one that looks reasonable. You can then remove any colours or layers that don't look right.

How do you add a gradient to an image in CSS?

The CSS background and background-image properties allow multiple layers. Simply put a semi-transparent gradient before the background image, separated by a comma. E.g:

background: linear-gradient(white, transparent),
            url('/path/to/image.png');